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

【问题标题】：jQuery - clicking 1 div and change class on 2 divsjQuery - 单击 1 个 div 并更改 2 个 div 上的类
【发布时间】：2016-10-17 15:45:40
【问题描述】：

我有 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;
});

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

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

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>

【讨论】：

【解决方案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 解析每个元素以切换单击。

希望对您有所帮助！

尼克

【讨论】：

【解决方案3】：

你需要改变这个toggleClass来选择“.yellowUp”

【讨论】：

【解决方案4】：

谢谢尼克，

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

$(".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 背景图像更改。

【讨论】：