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以显示图书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 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>

JS

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

})

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按钮显示/隐藏具有相同ID的多个div

3 个答案: