Question

我想交换第二类Bootstraps'glyphicon'span，但不是切换类，而是将其添加到后面，因此根本不会更改类。

我是jQuery / Javascript的新手（ish），我无法理解这一点。

继承人

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

脚本如下：

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

我得到了所有课程，而不仅仅是glyphicon-chevron-up，我得到了：

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

删除Element inspect上的glyphicon-tasks类会显示Chevron，因此有些方法会被阻止，而且任务字形不会被交换。

Answer 1

我认为你想要交换glyphicon-tasks和glyphicon-chevron-up。您需要像以下一样切换class。

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

Answer 2

这是因为你的函数被设置为class，这意味着具有给定类的所有元素。

要聚焦特定元素，请提供唯一ID。在这里，你已经有了一个。

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

Answer 3

我想这可以帮助

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

Answer 4

如果你想要更多的控制，最好使用jQuery，将data变量应用于多个glyphicons（很可能你将成为复选框，文件夹图标，树图标）：< / p>

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

...加上你网页的其他地方，例如另一个glyphicon（这不会被使用，影响我们的代码或受其影响）：

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

...而另一方面，这将受到我们的代码的影响（因为foldername匹配）：

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

...在JS中，切换它们的值而不影响每个其他的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);
});

注1：使用glyphicons的一种风格，将它们放在<i>标签内并直接引用它们。

注2："white"通常不是id的好主意。我推荐另一个data变量data-mycolor，这可能与您的代码逻辑密切相关。在这个例子中，它被设置，但没有真正使用。

单击更改Bootstrap Glyphicon

4 个答案: