How to show and hide divs and vary class crossed out?

Question

How to show and hide divs and vary class crossed out?

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

I am working with a price table and as you can see the total price varies through the action ws-plus and ws-min , this part I have it done. Now, what I need is to work with the actuators.

By default I want the "item that varies price" to reflect that it is not adding and for this I want it to appear crossed out and with the "+" icon visible, which gives the order to add the 100 with the class ws-plus and here comes my problem.

How can I make the "+" remove the strikethrough once, and replace this "+" icon with class ws-plus with an icon "-" with class ws-min ?

I understand that I need a script to play with the visibility of the "+" and "-" icons (when one is not the other one) and with the class that tells the text to appear crossed out or not.

I hope you can help me, if you do not understand the explanation or question well, tell me and edit to try to be clearer. Thank you very much!

<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>

javascript jquery html5

asked by Diego 09.04.2016 в 15:43

source

2 answers

DatePicker in Spanish Pylint - Too many boolean expressions in if statement

score 2 · Answer 1

If I understood your problem well, it could be something like this:

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;
}

score 0 · Answer 2

Add an ID to the link I show below and if you use jquery in the ready add a flag to it, give the flag an initial state (+), then assign an onclick to the control shown below, inside from it, give a condition to the flag, if the (+) is shown that is changed to (-) if there is (-) that changes to (+). In jquery you have the removeClass and the addClass, you can use it to change the class.

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