Find the elements of a jQuery eno class and append them a parameter

Navigation
1

I need to make a function in jQuery or JavaScript, which finds all items with a particular css class and add a parameter to that class, a different color for example.

  

I'll put on a button, after clicking the first time, the second time it has to remove this parameter. 

<button type="button" id="btn">Clique</button>
<div class="mudar">TEXTO QUE VAI MUDAR DE COR</div>
<div class="mudar">TEXTO QUE VAI MUDAR DE COR</div>
<div class="mudar">TEXTO QUE VAI MUDAR DE COR</div>
<div class="mudar">TEXTO QUE VAI MUDAR DE COR</div>
...
    
asked by anonymous 24.08.2016 / 22:20

3 answers

2

You can use jQuery's toggleClass function if you want to add or remove each click on the button, for example: 

$("#btn").click(function(){
  $(".mudar").toggleClass("tx-blue");
});
.tx-blue{
  color:blue;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttontype="button" id="btn">Clique</button>
<div class="mudar">TEXTO QUE VAI MUDAR DE COR</div>
<div class="mudar">TEXTO QUE VAI MUDAR DE COR</div>
<div class="mudar">TEXTO QUE VAI MUDAR DE COR</div>
<div class="mudar">TEXTO QUE VAI MUDAR DE COR</div>
    
24.08.2016 / 22:29
3

I think this is what you want: 

var contaCliques = 0;
$("#btn").click(function() {
    if (contaCliques == 0) {
        $(".mudar").addClass("outraCor");
        contaCliques++;
    } else {
        $(".mudar").removeClass("outraCor");
    }
});
.outraCor {
     background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttontype="button" id="btn">Clique</button>
<div class="mudar">TEXTO QUE VAI MUDAR DE COR</div>
<div class="mudar">TEXTO QUE VAI MUDAR DE COR</div>
<div class="mudar">TEXTO QUE VAI MUDAR DE COR</div>
<div class="mudar">TEXTO QUE VAI MUDAR DE COR</div>

Click the blue " Run " button above and see it working.

When you run, the first time you click the " Click " button, it adds the color and the second time it exits. From the third time on, nothing happens.

    
24.08.2016 / 22:24
1

See the code below working: 

// JAVASCRIPT


$('#btn').click(function(){
  $(".mudar").toggleClass('red');
});
/* CSS */
.red {
  background-color: red;
  }
<!-- HTML -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttontype="button" id="btn">Clique</button>
<div class="mudar">TEXTO QUE VAI MUDAR DE COR</div>
<div class="mudar">TEXTO QUE VAI MUDAR DE COR</div>
<div class="mudar">TEXTO QUE VAI MUDAR DE COR</div>
<div class="mudar">TEXTO QUE VAI MUDAR DE COR</div>

What the toggleClass will do is check if the class red exists: if it does not exist it adds and if it exists it removes. Something similar to: 

  if($('.mudar').hasClass('red')){
    $('.mudar').removeClass('red');
  }else{
    $('.mudar').addClass('red');
  }
    
24.08.2016 / 22:30
Transform multiple arrays into one array remove mask to save to the database