JQuery/JS的onclick改变元素的类内链接点击

JQuery/JS onclick change class of element inside link clicked

本文关键字：链接 改变 JS onclick JQuery 元素      更新时间：2023-09-26

我有一对使用bootstrap的下拉菜单，我想在一个简单的函数中编写代码，以更改链接内span元素的类。

澄清……这里有一个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>

我正在寻找一个函数(使用JS或JQuery)，它可以切换第二个span类在glyphicon glyphicon-triangle-bottom和glyphicon glyphicon-triangle-top之间变化。

请记住，此函数必须适用于多个下拉列表。

$('a[data-toggle="collapse"]').click(function() {
  $(this)
    .find('.glyphicon-triangle-bottom, .glyphicon-triangle-top')
    .toggleClass('glyphicon-triangle-top glyphicon-triangle-bottom');
});

同时删除onclick="toggleIcon()"

这应该适用于所有具有data-toggle="collapse"属性的锚标记。

相当简单—最好使用$.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>

我在这里所做的是将toggle-icon类添加到顶部链接中，并将icon-toggle类添加到字形图标的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');
}
})

添加注释，以便更好地阅读代码。希望这对你有帮助!

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>

希望对你有帮助。

到目前为止，我认为答案还可以(以我个人的拙见)。花点时间读一读:

解耦你的HTML, CSS和JavaScript

我将改变一些东西，使它看起来真正可读和可维护:

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: 

[data-toggle="collapse"][aria-expanded="false"] .hide-on-collapsed{
  display: none;
}
[data-toggle="collapse"][aria-expanded="true"] .hide-on-expanded{
  display: none;
}

JsFiddle工作示例

  1. 我强烈建议你尽量避免使用内联函数。( onclick="toggleIcon()")
  2. 利用CSS和什么Bootstrap已经通过简单地编写html和CSS !
  3. 完全可重用，不关心你使用什么字形，不需要javascript，没有硬编码的事件或类。
相关文章：