Question

我有两个名为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

如果您希望两个.yellowUp div在点击1时都拥有.clicked类，那么只需选择该类，而不是$(this).toggleClass("clicked");。

jQuery

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

＆＃13;

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

＆＃13;

.yellowUp {
   color: blue;
}

.clicked {
   color: red;
}

＆＃13;

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

＆＃13;

Answer 2

这是因为您只更改了被点击对象的类。相反，使用：

$(document).ready(function(){
$('.yellowUp').on('click', function(e){
    e.preventDefault();
    $('.yellowUp').each(function($key, $index) {
         if ( $(this).hasClass("clicked") ) {
            $("#contentContainer").stop().animate({marginTop:"0px"}, 200);                       
        } else {
            $("#contentContainer").stop().animate({marginTop:"-300px"}, 200);
        }
        $(this).toggleClass("clicked");
    });
});
});

在前面的代码中，我们使用类yellowUp解析每个元素以切换点击。

希望它有所帮助！

尼克

Answer 3

您需要更改此toggleClass以选择“.yellowUp”

Answer 4

谢谢Nic，

我选择了这个非常简单的选项（至少对我来说）：

$(".yellowUp").click( function(event){
    event.preventDefault();
    if ( $(this).hasClass("clicked") ) {
        $("#contentContainer").stop().animate({marginTop:"0px"}, 200); 
        $(".yellowUp").css("background-image", "url(images/arrow-up.png)");                      
    } else {
        $("#contentContainer").stop().animate({marginTop:"100px"}, 200);
        $(".yellowUp").css("background-image", "url(images/arrow-down.png)");
    }
    $(this).toggleClass("clicked");
    return false;
});

我刚为每个条件添加了css背景图片更改。

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

4 个答案: