Question

我希望按钮的图标类只在第一次点击按钮事件时更改，这也会ajax。将一个字段输入到数据库..

<div class="btn-group check-btns checkIt">
    <button type="button" class="btn btn-xs dropdown-toggle" data-toggle="dropdown">
    <span class="glyphicon glyphicon-unchecked"></span>
    </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">List Item 1</a></li>
    </ul>
</div>

首先测试了这个简单的on.click（http://jsfiddle.net/57268/1/），但是认为Bootstrap的内置下拉.open类切换可能会阻止这个..

$(document).ready(function () {

    $(function () {
    $('.checkIt').on('click', function () {

但更改它以收听显示的下拉列表仍然无法正常工作http://jsfiddle.net/57268/：

$(document).ready(function () {

    $(function () {
    $('.btn-group.check-btns.checkIt').on('show.bs.dropdown', function () {
            console.log('checkIt clicked');
            var $this = $(this);
          var $that = $(this).children('.check-btns').children('.btn').find('.glyphicon')
          if ($that.hasClass('.glyphicon-unchecked')) {
            $that.removeClass('.glyphicon-unchecked').addClass('.glyphicon-check');
            console.log('now checked icon');
            $this.removeClass('.checkIt').addClass('.checkedIt');
            console.log('now checkedIt class');
            alert('checked and checkedIt .. now an ajax .put call');
          }
      })
    });

});

Answer 1

尝试

Fiddle Demo

hasClass，removeClass，addClass使用className而不是选择器

例如。 $el.addClass('class')是正确的，但不是$el.addClass('.class')

$(document).ready(function () {
    $('.checkIt').on('click', function () {
        console.log('checkIt clicked');
        var $this = $(this),
            $that = $(this).find('.glyphicon'); //changed to .find() only
        if ($that.hasClass('glyphicon-unchecked')) {
            $that.removeClass('glyphicon-unchecked').addClass('glyphicon-check');
            console.log('now checked icon');
            $this.removeClass('checkIt').addClass('checkedIt');
            console.log('now checkedIt class');
            alert('checked and checkedIt');
        }
    });
});

Answer 2

为了解释Tushar的解决方案，您的原始代码有两个问题：

使用.children（'。check-btns'）定义$的链 - 这会在$ this元素子元素中查找带有类check-btns的元素，但$ this实际上是已经拥有的div这个类（你在自己的孩子里面寻找一个元素）。
在hasClass中，您正在寻找“.glyphicon-unchecked”类 - 这是不可能的，类名实际上是“glyphicon-unchecked”，只有当您需要选择器时才使用该点。

首次点击打开下拉菜单的按钮更改班级？

2 个答案: