2

estoy trabajando con una tabla de precios y como veis el precio total varia a través de la acción ws-plus y ws-min, esta parte la tengo hecha. Ahora bien, lo que necesito es trabajar con los accionadores.

Por defecto quiero que el "item que varia precio" refleje que no esta sumando y para ello quiero que aparezca tachado y con el icono "+" visible, que da la orden de sumar los 100 con la clase ws-plus y aquí llega mi problema.

¿Como puedo hacer para que una vez de al "+" se quite el tachado, y se sustituya este icono "+" con la clase ws-plus por un icono "-" con la clase ws-min?

Entiendo que necesito un script para jugar con la visibilidad de los iconos "+" y "-" (cuando uno esta el otro no) y con la clase que le diga al texto que aparezca tachado o no.

Espero que puedan ayudarme, si no se entiende bien la explicación o pregunta decidme y edito para intentar ser mas claro. Muchas gracias!

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<sup class="nprice">€</sup> <strong class="ws_basic_sum">100</strong>

<li>
  <a class="ws_plus"><i class="fa fa-plus"></i></a>El item que varia precio
  <input type="hidden" value="0" ws_max="1" ws_min="0" ws_step="1" ws_price="100" class="ws_basic" />
  <div class="hide" id="quitar">
    <a class="ws_minus"><i class="fa fa-close fa-red"></i></a>
  </div>
</li>

2
  • Hola Diego, veo que estás usando Font Awesome, aparte de eso ¿utilizas algún framework/biblioteca? (p.e.: Bootstrap). También, ¿podrías añadir los estilos relacionados y explicar un poco la parte de los atributos ws_* si es que tienen algo que ver con el asunto?
    – Alvaro Montoro
    el 10 abr. 2016 a las 13:14
  • 1
    Hola Diego, como menciona Alvaro, intenta explicarte un poco mejor para poder ayudarte. También incluye el código de los estilos ws_plus y ws_minus y cualquier otro mas que sea necesario para entender tu pregunta el 12 abr. 2016 a las 22:50

2 respuestas 2

2

Si es que entendí bien tu problema, podría ser algo así:

jQuery

$(document).ready(function() {
  $('.ws_plus').click(function() {
    $('label').removeClass('tachado');
    $('.ws_minus').show();
    $('.ws_plus').hide();
    var num1 = parseInt($('.ws_basic_sum').html());
    var num2 = parseInt($('.ws_basic').attr('ws_price'));
    var suma = num1+num2;
    $('.ws_basic_sum').html(suma);
  });
});

HTML

<sup class="nprice">€</sup> <strong class="ws_basic_sum">100</strong>
<label class="tachado">El item que varia precio</label>
<input type="hidden" value="0" ws_max="1" ws_min="0" ws_step="1" ws_price="100" class="ws_basic" />
<div class="hide" id="quitar">
<a class="ws_plus"><i class="fa fa-plus"></i></a>
<a class="ws_minus"><i class="fa fa-close"></i></a>
</div>

CSS

.ws_minus {
  display: none;
}

label.tachado {
  text-decoration: line-through;
}
1
  • 1
    Bienvenido al sitio @Didjeram. Por favor publica la solución en el sitio y no en un sitio externo. Adicional a ello, convendría que expliques por qué tu propuesta soluciona el problema.
    – user227
    el 13 may. 2016 a las 20:39
0

Agregale un ID al link que muestro debajo y si usas jquery en el ready agregale un flag, al flag ponele un estado inicial (+), luego asigna un onclick al control que muestro debajo, dentro de el, dale una condición al flag, si se muestra el (+) que se cambie a (-) sinó si hay (-) que cambie a (+). En jquery tenes el removeClass y el addClass, podes usarlo para cambiar la clase.

<a class="ws_plus"><i class="fa fa-plus"></i></a>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.