[英]JQuery/JS onclick change class of element inside link clicked
I have a couple of drop downs using bootstrap and I want to code in a simple function to change the class of my span element inside the link that is clicked.我有几个使用 bootstrap 的下拉菜单,我想在一个简单的函数中编写代码,以更改单击的链接内的 span 元素的类。
To clarify... Here's an example of the HTML
I have:为了澄清......这是我拥有的HTML
示例:
<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false"
onclick="toggleIcon()">
<span class="glyphicon glyphicon-knight"></span>
Drop Down Title
<span class="glyphicon glyphicon-triangle-bottom"></span>
</a>
<div class="collapse" id="collapse-panel">
<!-- content -->
</div>
I am looking for a function (using JS
or JQuery
) which can toggle the second span class to change between glyphicon glyphicon-triangle-bottom
and glyphicon glyphicon-triangle-top
.我正在寻找一个函数(使用JS
或JQuery
),它可以切换第二个 span 类以在glyphicon glyphicon-triangle-bottom
和glyphicon glyphicon-triangle-top
之间切换。
Bear in mind, this function has to work for multiple drop-downs.请记住,此功能必须适用于多个下拉列表。 Any help would be much appreciated.任何帮助将不胜感激。
$('a[data-toggle="collapse"]').click(function() {
$(this)
.find('.glyphicon-triangle-bottom, .glyphicon-triangle-top')
.toggleClass('glyphicon-triangle-top glyphicon-triangle-bottom');
});
Also remove onclick="toggleIcon()"
同时删除onclick="toggleIcon()"
This should work for all anchor tags that have data-toggle="collapse"
attribute.这应该适用于所有具有data-toggle="collapse"
属性的锚标记。
Fairly straightforward - better to use a $.click() function and get your classes right:相当简单 - 最好使用 $.click() 函数并正确设置类:
<a data-toggle="collapse" class="toggle-icon" href="#collapse-panel" aria-expanded="false">
<span class="glyphicon glyphicon-knight"></span>
Drop Down Title
<span class="icon-toggle glyphicon glyphicon-triangle-bottom"></span>
</a>
<div class="collapse" id="collapse-panel">
<!-- content -->
</div>
What I did up here was add the class of toggle-icon to the top link, and the class of icon-toggle to the span of the glyphicon...the JS is as follows:我在这里做的是将toggle-icon类添加到顶部链接,并将icon-toggle类添加到glyphicon的span......JS如下:
// On Toggle-Icon Click
$('.toggle-icon').click(function(){
// Set Icon To toggle in function
var IconToToggle = $(this).find('.icon-toggle');
// If the icon is the bottom icon
if (IconToToggle.hasClass('glyphicon-triangle-bottom')) {
// Change the icon to the top icon
IconToToggle.removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top');
// Otherwise
} else {
// Change the top icon to the bottom icon
IconToToggle.removeClass('glyphicon-triangle-top').addClass('glyphicon-triangle-bottom');
}
})
Annotations added so you can read the code better.添加了注释,以便您可以更好地阅读代码。 Hope this helps!希望这有帮助!
https://jsfiddle.net/khxehd05/ https://jsfiddle.net/khxehd05/
$(function(){ $('#checkcls').click(function(){ if($('#tglcls').hasClass('glyphicon-triangle-bottom')){ $('#tglcls').removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-top'); //to check class alert($("#tglcls").attr('class')); } else{ $('#tglcls').addClass('glyphicon-triangle-bottom').removeClass('glyphicon-triangle-top'); //to check class alert($("#tglcls").attr('class')); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a data-toggle="collapse" href="#collapse-panel" aria-expanded="false" id='checkcls'> <span class="glyphicon glyphicon-knight"></span> Drop Down Title <span class="glyphicon glyphicon-triangle-bottom" id='tglcls'></span> </a> <div class="collapse" id="collapse-panel"> <!-- content --> </div>
Hope it helps you.希望对你有帮助。
So far answers here I would consider just mildly-ok (in my humble opinion).到目前为止,我认为这里的答案只是温和的(以我的拙见)。 Take a moment and read:花点时间阅读:
Decoupling Your HTML, CSS, and JavaScript 解耦 HTML、CSS 和 JavaScript
I would change a few things to make it look really readable and maintainable:我会更改一些内容以使其看起来真正具有可读性和可维护性:
Html:网址:
<a data-toggle="collapse" href="#collapse-panel" aria-expanded="false">
<span class="glyphicon glyphicon-knight"></span>
Drop Down Title
<span class="glyphicon glyphicon-triangle-bottom hide-on-expanded"></span>
<span class="glyphicon glyphicon-triangle-top hide-on-collapsed"></span>
</a>
<div class="collapse" id="collapse-panel">
<!-- content -->
</div>
css: css:
[data-toggle="collapse"][aria-expanded="false"] .hide-on-collapsed{
display: none;
}
[data-toggle="collapse"][aria-expanded="true"] .hide-on-expanded{
display: none;
}
Working JsFiddle Example工作 JsFiddle 示例
onclick="toggleIcon()"
) ( onclick="toggleIcon()"
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.