Question

我在那个代码中遇到了2个问题，首先，span标签不能很好地点击时应该是白色，只发生一次，我想当我点击页面中任意位置的图标和颜色回到第一阶段时，我在点击之前，用星号和黑色表示。

$(".btn_body").click(function () {
      $(this).find('i').toggleClass('glyphicon-asterisk glyphicon-star').css( "color", "white" );
      $(this).find('span').css('color', 'white');
      if ($(".btn_body").not(this).find("i").hasClass("glyphicon-star")) {
          $(".btn_body").not(this).find("i").toggleClass('glyphicon-asterisk glyphicon-star').css( "color", "black" );
           $(this).find('span').css('color', 'black');
      }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="panel-body" id="myform">
    <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>

Answer 1

考虑以下代码删除了这两个问题：

  $(".btn_body").click(function () {
      $(this).find('i').toggleClass('glyphicon-asterisk glyphicon-star');
      if ($(this).find("i").hasClass("glyphicon-star")) {
          $(this).find("i").css( "color", "white" );
      } else{
        $(this).find("i").css( "color", "black" );
      }
  });

$(document).on("click",function(e){
    var $target = $(e.target);
    var isTargetClick = !$target.add($target.parents()).is(".btn");
    if(isTargetClick){
    $(this).find('i').attr("class",'glyphicon glyphicon-asterisk').css( "color", "black" );
    }
});

DEMO

Answer 2

我不明白你的第一个问题。对于第二个，下面的代码将执行

[someWorker runBackgroundOperationAndCall:^{
    dispatch_async(dispatch_get_main_queue(), ^{
        // update UI
    });
}];

Answer 3

对于您的第一个问题，您必须使用（＆＃39;点击＆＃39;＆＃39;＃id＆＃39;，function（）{...}而不是点击（）。

＆＃13;

$(document).on('click','.btn_body',function () {
      $(this).find('i').toggleClass('glyphicon-asterisk glyphicon-star').css( "color", "white" );
      $(this).find('span').css('color', 'white');
      if ($(".btn_body").not(this).find("i").hasClass("glyphicon-star")) {
          $(".btn_body").not(this).find("i").toggleClass('glyphicon-asterisk glyphicon-star').css( "color", "black" );
           $(this).find('span').css('color', 'black');
      }
  });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="panel-body" id="myform">
    <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>

＆＃13;

Answer 4

我还没有完全理解你的第一个问题，但是对于第二个问题你可以做的事情

$( ".btn_body" ).focusout(function() {
    $(this).css('color', 'black');
    $(this).find('i').toggleClass('glyphicon-asterisk glyphicon-star').css( "color", "black" );
})

如果您查看此fiddle example，您会看到结果。

总是如果这个fiddle，如果你取消注释第2行（我添加了）

$(this).css('color', 'white');

它能解决你的第一个问题吗？

Answer 5

我不确定我是否完全理解你的问题，但无论如何我都会试一试。

保留用于更改图标的代码，您可以检测到body元素的子元素（理论上，所有内容）的点击，并删除所需类的任何实例;

 $('body').on('click', '*', function(){
   // remove any instance of the 'glyphicon-star' class
   $('.glyphicon-star').removeClass('glyphicon-star');
 })

当我点击页面的任何部分时，Jquery使类恢复原状

5 个答案: