jQuery 按钮显示/隐藏具有相同 id 的多个 div答案

【问题标题】：jQuery button to show/hide multiple divs with same idjQuery 按钮显示/隐藏具有相同 id 的多个 div
【发布时间】：2015-06-10 21:15:05
【问题描述】：

我有许多动态填充的产品，它们都具有相同的 id 和类名。我希望每个“立即购买”按钮都有自己的 div，通过单击按钮进行切换。

我确实有能力为 id 和类分配一个递增的数字索引，但是，如果有办法避免它，我不想手动列出每个唯一的 id 和类来定位每个点击功能。

最好的方法是什么？

这就是我现在所拥有的......

HTML：

 <button class="btn button-success clickme">Buy Now</button>
 <div class="book" style="display: none;">
     <!-- content here -->
 </div>

 <button class="btn button-success clickme">Buy Now</button>
 <div class="book" style="display: none;">
     <!-- content here -->
 </div>

jQuery:

$( ".clickme" ).click(function() {
  $( ".book" ).slideToggle( "slow", function() {
    // Animation complete.
  });
});

【问题讨论】：

在 HTML 中，ID 被认为是唯一的，因此您不能拥有多个具有相同 ID 的元素。 jQuery 将简单地选择它找到的第一个。如果您将id="clickme" 更改为class="clickme"，然后使用".clickme" 选择器，您的代码会更正确。
stackoverflow.com/questions/7505350/…
对多个元素使用相同的 id 不是一个好的设计。并且还使用类属性btn button-success 来将公共事件绑定到所有按钮。
这样做只会打开所有带有class="book" 的div。我已经相应地编辑了上面的代码。
您可能还想在 jquery 中查看 $(this)。这将有助于同时打开所有 div。

标签： jquery jquery-selectors click element slidetoggle

【解决方案1】：

忽略对同一页面上的多个元素使用相同 ID 的想法，您可以在函数中访问 this 以显示图书 div。

从使用#clickme 切换到将点击事件侦听器附加到.button-success 的示例：

HTML

<button class="btn button-success" id="clickme">Buy Now</button>
 <div class="book" style="display: none;">
     content
 </div>

 <button class="btn button-success" id="clickme">Buy Now</button>
 <div class="book" style="display: none;">
     content
 </div>

 <button class="btn button-success" id="clickme">Buy Now</button>
 <div class="book" style="display: none;">
     Content here
 </div>

 <button class="btn button-success" id="clickme">Buy Now</button>
 <div class="book" style="display: none;">
     content
 </div>

JQUERY

$( ".button-success" ).click(function() {
    $(this).next(".book").slideToggle( "slow", function() {
    // Animation complete.
  });
});

这是在做什么：

当用户点击任何.button-success 时，它会查找下一个.book div 并切换内容。

演示：http://jsfiddle.net/9zaLtmaf/

【讨论】：

【解决方案2】：

你可以像这样更新你的代码

HTML

 <button class="btn button-success" id="clickme1">Buy Now</button>
 <div class="book" id="book1" style="display: none;">
     <!-- content here -->
 </div>

 <button class="btn button-success" id="clickme2">Buy Now</button>
 <div class="book" id="book2" style="display: none;">
     <!-- content here -->
 </div>

$(".button-success").click(function(){
         var divToToggleId = $(this).attr("id").replace("clickme", "book");
         var divToToggleElement = $(divToToggleId);
         // Write your cod here.

})

【讨论】：

@frshjb373 - 检查了我的回答，对你有用吗？
@frshjb373 - 如果对您有用，请将答案标记为已选择。在我身边晚安:)

【解决方案3】：

function ShowElement(elementID)
{
    if (elementID.length > 0) {
        if ($("[id='" + elementID + "']").length > 0) {

                $("[id='" + elementID + "']").each(function (index) {
                    $(this).show();
                });               
        }
    }
}


function HideElement(elementID)
{
    if (elementID.length > 0) {
        if ($("[id='" + elementID + "']").length > 0) {

                $("[id='" + elementID + "']").each(function (index) {
                    $(this).hide();
                });               
        }
    }
}

【讨论】：

您好，感谢您的贡献。请添加一些关于此代码将如何解决问题的说明，以便访问者能够确定这是否是正确的解决方案。