使JavaScript项独立

我正在使用jQuery脚本展开/折叠页面上的div，它工作得非常好。我现在尝试复制代码，所以有两个div做相同的事情，但我希望它们是独立的，但是当我单击其中一个时，它们都是打开/关闭的。只是想知道我做错了什么

到目前为止，我有以下HTML：

    <div class="infoToggle1">
        <div class="panel-controller">
            <div class="tab-controller1">
                <span class="close">CLOSE</span>
                <span class="show">MORE INFO</span>
            </div>
        </div>
        <div class="panel-content1">
            Content goes here
        </div>
    </div>

    <div class="infoToggle2">
        <div class="panel-controller">
            <div class="tab-controller2">
                <span class="close">CLOSE</span>
                <span class="show">MORE INFO</span>
            </div>
        </div>
        <div class="panel-content2">
            Content goes here
        </div>
    </div>

---

提前谢谢

不要在打开/关闭动画中使用类选择器，请尝试将重点放在引用与单击的项目相关的元素上。

不要在打开/关闭动画中使用类选择器，请尝试将重点放在引用与单击的项目相关的元素上。

查看用于显示和隐藏项目的代码面板。在这两种情况下，您都有：

$('.infoToggle1, .infoToggle2')

作为jQuery选择器。此选择器正在选择两个面板，并同时在两个面板上调用

.animate（）

。它无法区分您单击的是哪一个

一种解决方案可能是将每个按钮放入要设置动画的容器中

    $(document).on('click', '.tab-controller1', function() {
         Panel.togglePanel('.infotoggle1');
    })
    .on('click', '.tab-controller2', function() {
         Panel.togglePanel('.infotoggle2');
    });

当然，还要调整

Panel.togglePanel（）

以使用新参数作为jQuery选择器

---

当然有一种更快/更干净的方法，但这应该可以让您开始了。

看看显示和隐藏面板的代码。在这两种情况下，您都有：

$('.infoToggle1, .infoToggle2')

作为jQuery选择器。此选择器正在选择两个面板，并同时在两个面板上调用

.animate（）

。它无法区分您单击的是哪一个

一种解决方案可能是将每个按钮放入要设置动画的容器中

    $(document).on('click', '.tab-controller1', function() {
         Panel.togglePanel('.infotoggle1');
    })
    .on('click', '.tab-controller2', function() {
         Panel.togglePanel('.infotoggle2');
    });

当然，还要调整

Panel.togglePanel（）

以使用新参数作为jQuery选择器

---

当然有一种更快/更干净的方法，但这应该可以让您开始使用。

您需要两个面板对象，因为每个对象都需要自己的

isVisible

设置和几个类名。为此，您可以将

面板

对象转换为构造函数，并传递一个数字（1或2）。该构造函数将返回您拥有的对象，但其特殊性仅适用于第一个元素结构。如果使用另一个数字再次调用该构造函数，则将获得需要操作（并保持第二个结构的状态）的对象

您的代码可能如下所示（未经测试）：

---

您需要两个面板对象，因为每个对象都需要自己的

isVisible

设置和几个类名。为此，您可以将

面板

对象转换为构造函数，并传递一个数字（1或2）。该构造函数将返回您拥有的对象，但其特殊性仅适用于第一个元素结构。如果使用另一个数字再次调用该构造函数，则将获得需要操作（并保持第二个结构的状态）的对象

您的代码可能如下所示（未经测试）：

---

@伪忍者是对的。如果你想要两个独立的演员，你需要插入你的脚本。代码的正确样板是：您是否被允许重构代码/标记？我有一个解决方案，我可以发布，但这是一个相当不错的大修，因此编辑基本代码/标记是不可能的，它不会有多大帮助。这可能对您有用，但它与您的原始代码有很大的偏差：而且，根据经验，如果您需要在类的末尾添加数字，那么您最好使用

id

。虽然我知道这是相对的情况，可能不适合所有情况，但我想不出有必要增加类的情况。@PseudoNinja是正确的。如果你想要两个独立的演员，你需要插入你的脚本。代码的正确样板是：您是否被允许重构代码/标记？我有一个解决方案，我可以发布，但这是一个相当不错的大修，因此编辑基本代码/标记是不可能的，它不会有多大帮助。这可能对您有用，但它与您的原始代码有很大的偏差：而且，根据经验，如果您需要在类的末尾添加数字，那么您最好使用

id

。虽然我知道这是相对的情况，可能不适合所有的情况，但我想不出有必要增加课程的情况。谢谢大家的帮助。trincot，你的解决方案非常有效！！谢谢大家的帮助。trincot，你的解决方案非常有效！！