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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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