Question

我遇到一个问题，即我正在使用某些代码的多个实例来显示/隐藏div。问题是，如果我单击其中一个按钮，则会显示所有div，但是我不确定为什么会发生这种情况，因为div具有不同的类。

我的意图是，在此示例中，页面加载时会显示<div class="red-top1>和<div class="red-top2>的内容，而当我按下按钮时，mybuttontop1会显示<div class="green-top1>，但会显示<div class="green-top1>和<div class="green-top2">都不是预期的行为，我希望每个div在每次按下按钮时都独立显示。

不确定我在做什么错吗？

谢谢。

以下是相关代码段：

function ButtonTextTop2() {
    if ($("#green-top2").is(":visible")) {
        $("button").text("Show less...");
    } else {
        $("button").text("Show more...");
    }
}
ButtonTextTop2();
$("button").click(function () {
    $("#green-top2").toggle();
    $("#red-top2").toggle();
    ButtonTextTop2();
});

function ButtonTextTop1() {
    if ($("#green-top1").is(":visible")) {
        $("button").text("Show less...");
    } else {
        $("button").text("Show more...");
    }
}
ButtonTextTop1();
$("button").click(function () {
    $("#green-top1").toggle();
    $("#red-top1").toggle();
    ButtonTextTop1();
});

#red-top1 {
}
#green-top1 {
    display:none;
}
#red-top2 {
}
#green-top2 {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red-top1">
    Code here
</div>
<div class="green-top1">
    Other code here
</div>

<div class="red-top2">
    Code here
</div>
<div class="green-top2">
    Other code here
</div>

<button class="mybuttontop1">Show more...</button>
<script type="text/javascript">

</script>


<button class="mybuttontop2">Show more...</button>

Answer 1

Selectors都是错误的。您正在尝试访问Style Class选择器(.)，但使用的是Element Id选择器(#)。

只需更改所有脚本代码和样式代码中的“＃”，就可以了。

例如：

JavaScript

使用：if ($(".green-top1").is(":visible")) {

而不是：if ($("#green-top1").is(":visible")) {

样式

使用：.green-top1 {

而不是：#green-top1 {

注意将“＃”替换为“。”。

这是您的工作代码：https://jsfiddle.net/12toxyn9/

使用正确的代码更新答案：https://jsfiddle.net/2p90cehb/

在绑定按钮的click事件时也需要进行更改。您先前的代码附加了两个按钮的click事件，因此，只要单击一个按钮，就会触发两个事件。将其更改为单个按钮的单击事件可解决此问题。

使用：$(".mybuttontop1").click(function () {和$(".mybuttontop2").click(function () {分别作为按钮。

代替：$("button").click(function () {用于两个功能。

Answer 2

我相信是因为您使用的是id标签选择器$("#green-top")，而不是类标签选择器$(".green-top")。

CSS也是如此。您不是在定义类，而是在定义ID的样式。要定义class绿顶，您将拥有

    .green-top {
        style: here;
    }

我确定这会导致您所看到的不一致。

jQuery多重显示/隐藏div问题

2 个答案: