如何通过使用jQuery单击另一个元素来更改元素的类

Question

当我点击<a> ，如何更改HTML元素的class （X：元素），当我点击其他元素（div，body，li）时，这个元素的类（X：元素）会改变这个就是这样的例子：

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

当我点击a addClass （B）

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

Answer 1

尝试使用以下代码：

 $(document).ready(function(){ var aTag = $("aA"); 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> 

Answer 2

据我所知，你说的是这样的：

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

Answer 3

假设我理解你的问题，我将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> 

Answer 4

如果我理解正确，这应该有效......

$('.a').on('click', function(){

    $(this).addClass('B');
});

$('.click').on('click', function(){

    $('.a').removeClass('B');
});

Answer 5

单击“a”标记会将类B添加到“div”并单击类。

当点击任何东西，但与类点击 “格” 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;
    });
});