Keep the initial class of the element

Question

Keep the initial class of the element

Asked 6 years, 12 months ago

Viewed 52 times

4

I have a script that does the toggle in the icon, interspersed when the element is clicked, my intention is when the second or the others icons were clicked, the elements remained with the class glyphicon-chevron-down.

<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
    <i class="taskIcon glyphicon glyphicon-chevron-down"></i>
</a>

<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
    <i class="taskIcon glyphicon glyphicon-chevron-down"></i>
</a>

<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
    <i class="taskIcon glyphicon glyphicon-chevron-down"></i>
</a>

$(".taskIcon").on("click", function() {
    $(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
});

The code you put there only changes the clicked element.

– Oralista de Sistemas

2017/11/07 at 17:26
if you click on the first icon, just once and then click on the second icon, the toggleclass that puts the glyphicon-chevron-up class, stays in the element, wanted to keep the glyphicon-chevron-down class for everyone after the toggle.

– Marcelo Batista

2017/11/07 at 17:31

2 answers

4

You can use the .siblings to obtain adjacent elements and change their class.

$(".taskIcon").on("click", function() {
  var $this = $(this);
  $this.toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
  var context = $this.parent().siblings(); // Obtem os links adjacentes
  $(".taskIcon", context).removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="taskIcon glyphicon glyphicon-chevron-down"></i></a>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="taskIcon glyphicon glyphicon-chevron-down"></i></a>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="taskIcon glyphicon glyphicon-chevron-down"></i></a>

1

+1 for remembering the siblings and by executable example.

– Oralista de Sistemas

2017/11/07 at 17:39
in this case where we would have icon separated by Divs <div><i class=taskIcon></i></div> <div><i class=taskIcon></i></div> we would use siblings too

– Marcelo Batista

2017/11/07 at 17:55

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.

by Oralista de Sistemas • **23,115** points · Answer 1 · 2017-11-07T17:36:37+00:00

If I understand correctly, you wish that by clicking on an icon:

That icon has its class modified according to the current code, but that in addition...
... all other icons take on a specific class.

You can include a few more instructions in your code, to change everyone who belongs to a certain class. So:

$(".taskIcon").on("click", function() {
    let iconeClicado = $(this),
        outrosIcones = $(".taskIcon").not(iconeClicado);

    outrosIcones
        .removeClass("glyphicon-chevron-up")
        .addClass("glyphicon-chevron-down");

    iconeClicado
        .toggleClass("glyphicon-chevron-down")
        .toggleClass("glyphicon-chevron-up");
});

This will remove the up arrow class from all icons except the clicked one. Similarly, it will give the down arrow class to all icons except the clicked one. Already the clicked icon keeps its behavior.