如何通过jQuery点击另一个元素来改变元素的类

How to change the class of an element by clicking on another element with jQuery

本文关键字：元素 改变 另一个 何通过 jQuery      更新时间：2023-09-26

如何改变一个HTML元素(X:element)的class，当我点击<a>，当我点击其他元素(div,body,li)，这个元素(X:element)的类改变下面是示例:

<a class='A'></a>
<div class='click'></div>

当我点击a addClass (B)

当我点击其他元素removeClass:(B)

试试下面的代码:

$(document).ready(function(){
  
  var aTag = $("a.A");
  var divTarget = $("div.click");
  
   $(document).click(function(e){
     var target = $(e.target);
     if(target.is(aTag)){
        if(divTarget.hasClass("B"))
          divTarget.removeClass("B");
        else
          divTarget.addClass("B");
     }
     else if(!target.is(divTarget))
     {
       $(divTarget).removeClass("B");
     }
  });
  
})
.B{
  color: blue}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a class='A'>Link A</a>
<div class='click'>Click Div</div>
<div class='click1'>Click Div 1</div>
<div class='click2'>Click Div 2</div>

如果我没理解错的话，你是这样说的:

$(document).on('click',function(){
       $('.A').removeClass('B');
    });
$('.A').on('click',function(e){
       $('.A').addClass('B');
       e.stopImmediatePropagation();
       return false;
    });

假设我理解你的问题，我添加类B到。click如果你点击A，点击其他地方，我删除它

    $(function() {
      $(document).on("click", function(event) {
        var $tgt = $(event.target);
        $(".click").toggleClass("B", $tgt.hasClass('A'))
      });
    });
.B { color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class='A'>Click here</a>
<div class='click'>Text</div>

如果我没理解错的话，这应该行得通…

$('.a').on('click', function(){
    $(this).addClass('B');
});
$('.click').on('click', function(){
    $('.a').removeClass('B');
});

点击'a'标签将添加class B到'div'， class 点击 。

当'div'与类click被点击时，类B被删除。

$(document).ready(function() {
    $(".A").on("click", function() {
        $(".click").addClass("B");
        return false;  // prevents the page from being reloaded
    });
    $(document).on("click", function() {
        if(!$(this).hasClass('click')) {
            $(".click").removeClass("B");
        }
        return false;
    });
});
相关文章：