javascript - jQuery - 单击 1 个 div 并更改 2 个 div 上的类

Question

我有 2 个名为 yellowUp 的 div，并以向上箭头作为背景图像。

现在，当我单击 yellowUp div 时，只有单击的 div 会更改类。如何让两个 div 在点击时更改类？

HTML

<div class="yellowUp"></div>

<div class="yellowUp"></div>

<div id="contentContainer"></div>

CSS

.yellowUp {
   background-image: url(../images/arrow-up.png);
}

.clicked {
    background-image: url(../images/arrow-down.png);
}

jQuery

$(".yellowUp").click( function(event){
    event.preventDefault();
    if ( $(this).hasClass("clicked") ) {
        $("#contentContainer").stop().animate({marginTop:"0px"}, 200);                       
    } else {
        $("#contentContainer").stop().animate({marginTop:"-300px"}, 200);
    }
    $(this).toggleClass("clicked");
    return false;
});

Answer 1

如果您希望在单击 1 时两个 .yellowUp div 都具有 .clicked 类，则不要执行 $(this).toggleClass("单击"); 只需选择类即可。

jQuery

$(".yellowUp").toggleClass("clicked");

<小时/>

$(".yellowUp").click( function(event){
    event.preventDefault();
    if ( $(this).hasClass("clicked") ) {
        $("#contentContainer").stop().animate({marginTop:"0px"}, 200);                       
    } else {
        $("#contentContainer").stop().animate({marginTop:"-300px"}, 200);
    }
    $('.yellowUp').toggleClass("clicked");
    return false;
});

.yellowUp {
   color: blue;
}

.clicked {
   color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="yellowUp">Hi</div>

<div class="yellowUp">Hi</div>

<div id="contentContainer">BLah</div>