jQuery 按钮到 show/hide 具有相同 ID 的多个 div

Question

我有很多动态填充的产品，所有产品都具有相同的 ID 和 class 名称。我希望每个 "Buy Now" 按钮都有自己的 div，可以通过单击按钮进行切换。

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

完成此任务的最佳方法是什么？

这是我现在拥有的...

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.
  });
});

Answer 1

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

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>

JS

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

})

Answer 2

忽略对同一页面上的多个元素使用相同 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/

Answer 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();
                });               
        }
    }
}

jQuery 按钮到 show/hide 具有相同 ID 的多个 div

jQuery button to show/hide multiple divs with same id

jquery

element

click

jquery-selectors

slidetoggle