Question

请查看以下代码，无论出于何种原因，只有当我点击编辑链接时，我才能打开一个div，当我点击编辑链接时，它会打开所有div。

的jQuery

$(document).ready(function () {
    $("input:button[name='uploadboy']").click(function () {
        $(this).parent().children('.uploadboy').slideToggle(200, 'swing');
    });
});

HTML

<div style="overflow:auto;" class="links-box ">
    <p style="float:left; width:250px;" id="links">
        <input type="button" name="uploadboy" id="uploadboy" value="Uploaded" title="Uploaded" style="text-decoration:none;  color: white; text-shadow:none; background: #0692fe; float:left;" class="g-button">
    </p>
</div>
<div class="uploadboy" width: 600px;min-height:50px;background-color: #F2FDD7;border-radius: 10px;border: 1px solid #8EBD43;">
    <p>content</p>
</div>
<div style="overflow:auto;" class="links-box ">
    <p style="float:left; width:250px;" id="links">
        <input type="button" name="uploadboy" id="uploadboy" value="Uploaded" title="Uploaded" style="text-decoration:none;  color: white; text-shadow:none; background: #0692fe; float:left;" class="g-button">
    </p>
</div>
<div class="uploadboy" width: 600px;min-height:50px;background-color: #F2FDD7;border-radius: 10px;border: 1px solid #8EBD43;">
    <p>content</p>
</div>

example in jsFiddle

Answer 1

正如我在上面的评论中提到的，ID必须是唯一的。那说，试试这个：

$("input").click(function () {
    $(this).slideToggle(200, 'swing');
});

<强> jsFiddle example

Answer 2

使用以下脚本， .find 方法仅搜索后代（http://api.jquery.com/find/）。

$(document).ready(function () {
    $("input:button[name='uploadboy']").click(function () {
        $(this).parent().parent().next('.uploadboy').slideToggle(200, 'swing');
    });
});

Answer 3

我最初在这里看到的问题是，您有2个具有相同ID的输入按钮。虽然这可能不是整体问题，但您仍然不能拥有2个具有相同ID的元素。我也不确定这只是你清理过的通用代码问一个问题，但你的选择器看起来很复杂。将.click事件附加到两个输入按钮，然后转到父项按钮，即段落，然后转到子对象即按钮。你实际上是从第一点开始，上升到一个等级，然后回到一个等级。当点击处理程序附加到按钮时，无论何时单击按钮，都可以引用$（this）来引用按钮。

<input type="button" name="uploadboy" id="button1" />
<input type="button" name="uploadboy" id="button2" />

$(document).ready(function(){
    $("input:button[name='uploadboy']").click(function () {
        $(this).SlideToggle(200, 'swing');
    });
});

如果查看单击输入按钮时运行的函数，它只是引用$（this）对象。这是jquery的好处，$（this）是您单击的特定按钮。即使页面上有20个按钮，单击任何按钮也是如此。因此，在上面的示例中，单击的按钮将发生滑动切换。如果你需要像以前一样四处移动，你也可以从这个方向导航。

jquery切换一键打开所有div

3 个答案: