第一次单击打开下拉菜单的按钮时更改类？

Question

我希望仅在第一次单击按钮事件时更改按钮的图标类，这也将 ajax .put 一个字段到 db..

<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 采用类名而不是选择器

例如。 $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 的解决方案，您的原始代码有两个问题：

1234563这个类（你在它自己的子元素中寻找一个元素）。

1. 在 hasClass 中，您正在寻找类“.glyphicon-unchecked” - 这是不正确的，类名实际上是“glyphicon-unchecked”，点仅在您需要选择器时使用。