当我点击页面的任何部分时，Jquery如何将类还原为初始状态

Question

我在这段代码中遇到了两个问题。首先，当点击时，span 标签的颜色没有变成白色。只发生一次，我希望当我点击页面的任何地方时，图标和颜色都回到第一阶段，也就是它们被点击之前，变成星号和黑色。

Fiddle

$(".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>

- raduken

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

- Manwal

Answer 2

对于您的第一个问题，您需要使用on('click','#id',function(){ ...}而不是click()。

$(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');
      }
  });

<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>

- Baldráni

Answer 3

我不理解您的第一个问题。对于第二个问题，以下代码将会起作用。

$(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" );
    }
});

- Kishore Sahasranaman

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');

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

- DFayet

Answer 5

我不确定我完全理解你的问题，但我会尽力回答。

保留你已经编写的更改图标的代码，你可以检测 body 元素的子元素（理论上是所有元素）的点击事件，并删除任何你想要的类的实例；

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

- Lewis