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

Question

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

我确实可以为ID和类分配递增的数字索引，但是，如果有避免的方法，我不想手动列出每个唯一的ID和类以定位每个click函数。

完成此操作的最佳方法是什么？

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

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

忽略关于在同一页面上对多个元素使用相同ID的想法，您可以使用函数中的this来显示书目。]

从使用#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 2

您可以这样更新代码

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