单击更改Bootstrap Glyphicon

Question

I'm wanting to swap the second class of Bootstraps 'glyphicon' span, but instead of toggling the class, It's adding it behind, thus not changing the class at all.

I'm new(ish) to jQuery / Javascript and I just can't get my head around this.

Heres the

<nav class="navbar navbar-top" style="position:fixed; width:100%;">
<a class="navbar-brand" href="#">Project name</a>
<a class="navbar-brand" href="#" style="float:right;">
    <span class="glyphicon glyphicon-tasks" id="whiter"></span>
</a>

And the script is below:

$('.glyphicon').click(function(){
$(this).toggleClass('glyphicon-chevron-up');

I get all the classes instead of just glyphicon-chevron-up, Im getting:

<span class="glyphicon glyphicon-tasks glyphicon-chevron-up"></span>

Removing the glyphicon-tasks class on Element inspect displays the Chevron, so some how it is being blocked and the tasks glyph isnt being swapped.

Answer 1

I think you want to swap glyphicon-tasks and glyphicon-chevron-up . You need to toggle both class like following.

$(this).toggleClass('glyphicon-tasks glyphicon-chevron-up');

Answer 2

This is because your function is set to class, which mean all elements with the given class.

To focus a specific element, provide, for example, an unique ID. Here, you already got one.

$('#whiter').click(function() {
    $(this).toggleClass('glyphicon-chevron-up');
});

Answer 3

I guess this can help

$('.glyphicon').click(function(){
$(this).removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-up');
}

Answer 4

If you want to have a bit more control, use jQuery to its fullest, apply a data variable to multiple glyphicons (chances are that you'll be checkboxes, folder icons, tree icons):

<nav class="navbar navbar-top" style="position:fixed; width:100%;">
<a class="navbar-brand" href="#">Project name</a>
<a class="navbar-brand" href="#" style="float:right;">
  <span><i class="glyphicon glyphicon-tasks" data-tasks="firstCollection" data-mycolor="white" data-icontype="taskIcon"></i></span>
</a>

...plus, elsewhere in your page, another glyphicon, for example (this will not be used, affect or be affected by our code):

<i class="glyphicon glyphicon-unchecked" id="checkbox_Analytics" data-foldername="group_Analytics" data-icontype="groupCheckbox"></i>

...while, on the other hand, this will be affected by our code (because of foldername match):

<i class="glyphicon glyphicon-check" data-foldername="2014"  data-icontype="childCheckbox"></i>

...and in JS, toggle their values without affecting each and every other glyphicon:

$('i[data-icontype="taskIcon"]').on('click', function() {
     $('i[data-tasks="firstCollection"]').toggleClass('glyphicon-tasks glyphicon-chevron-up');
     console.log("current state now displays CHEVRON UP (true/false)? ["+$(this).hasClass('glyphicon-chevron-up')+"]");
});

...
$('i[data-icontype="childCheckbox"]').on('click', function() {
     $('i[data-foldername="2014"]').toggleClass('glyphicon-check glyphicon-unchecked');
     // Notice that you can also access the `data-foldername` variable directly for each element which has it
     var layerFolderName = $(this).closest('i').data('foldername');
     console.log("Changed glyphicon chevron in: "+layerFolderName);
});

NOTE1: one style of using glyphicons, places them inside <i> tags and references them directly thusly.

NOTE2: "white" is not, in general, a good idea for an id . I recommend another data variable, data-mycolor , which might in turn be germane to your code's logic. In this example, it is set, but not really used.