Question

我创建了一个点击事件，但该事件影响了两个下拉列表我想逐个进行，我也希望当我在下一个dropbox中点击第一个图标返回到位时，无论我点击第一个还是第二个总是放回我的html和jquery图标：http://jsfiddle.net/rtu1tzep/

HTML：

    <div class="body-title">
        title
    </div>

    <div class="form-group">
        <div class="col-md-16">
      <button type="button" class="btn btn-lg dropdown-toggle btn_body" data-toggle="dropdown" aria-expanded="false">
      <span id="users_label">users</span><i class="glyphicon glyphicon-asterisk"></i></button>
        </div>
    </div>

    <div class="form-group">
       <div class="col-md-16">
        <button type="button" class="btn btn-lg dropdown-toggle btn_body" data-toggle="dropdown">
     <span id="clients_label">clients</span>
    <i class="glyphicon glyphicon-asterisk"></i>

             </div>
        </div>

</div>

jquery的：

  $( ".btn_body" ).click(function(){
    $('i').removeClass('glyphicon-asterisk');
    $('i').addClass('glyphicon-star');
  });

Answer 1

更改您的Jquery。

$(".btn_body").click(function () {
        $('.btn_body').find('i').addClass('glyphicon-asterisk');
        $('.btn_body').find('i').removeClass('glyphicon-star').css('color', '');
        $(this).find('i').removeClass('glyphicon-asterisk');
        $(this).find('i').addClass('glyphicon-star').css('color', 'red');
    });

Answer 2

这就是你想要的。

$( ".btn_body" ).click(function(){
  $('i').removeClass('glyphicon-star');
  $('i').addClass('glyphicon-asterisk');
  $(this).children('i').removeClass('glyphicon-asterisk');
  $(this).children('i').addClass('glyphicon-star');
});

Answer 3

Demo

  $(".btn_body").click(function () {
      $(this).find('i').toggleClass('glyphicon-asterisk glyphicon-star');
      if ($(".btn_body").not(this).find("i").hasClass("glyphicon-star")) {
          $(".btn_body").not(this).find("i").toggleClass('glyphicon-asterisk glyphicon-star');
      }
  });

Answer 4

试试这个

$( ".btn_body" ).click(function(){
$('i').removeClass('glyphicon-star');
$('i').addClass('glyphicon-asterisk');
$(this).children('i').removeClass('glyphicon-asterisk');
$(this).children('i').addClass('glyphicon-star');
});

单击后，更改下拉图标框的Jquery

4 个答案:

Demo