带有动态元素的滑下动画答案

【问题标题】：slide down animation with dynamic elements带有动态元素的滑下动画
【发布时间】：2020-03-24 01:58:00
【问题描述】：

我想为我的网站建立一个购物车。此页面动态显示某人之前在列表中选择的所有项目。对于每个项目，我想制作一个向下滑动切换链接以显示每个项目的更多选项

HTML 和 PHP

<p>
  <span id="inquiryCartSlideDown" class="linkArrow">change order</span>
</p>
<div id="moreInfoInquiryCart" class="collapse">
    my div with labels and inputs
</div>

当客户通过 foreach 循环购买商品时，我的 PHP 会经常回显这个 div。所以我多次使用相同的 id 获得相同的 div。

`$(function(){
	$("#inquiryCartSlideDown").click(function(){
    	$("#moreInfoInquiryCart").slideToggle("slow");
  	});
});`

这有效，但仅适用于第一项。问题可能是我正在使用id。但是我应该怎么做呢。

【问题讨论】：

标签： javascript php animation dynamic

【解决方案1】：

您可以使用 JQuery 的 on 函数，该函数也适用于动态元素：-

$(function(){
    $('.linkArrow').on('click', function() {
        $(this).closest(".collapse").slideToggle("slow"); 
    });
});

希望这会有所帮助。！！

【讨论】：

谢谢。这对我有用。（我最终更改了类名，但这并没有改变概念）而且我最终需要 &(this).next 但也许我只是错误地传达了我的问题。

【解决方案2】：

首先保留display:none要滑动切换的div。像这样。

HTML 代码。

<p>
    <span id="inquiryCartSlideDown" class="linkArrow">change order</span>
</p>
<div id="moreInfoInquiryCart" class="collapse" style="display: none;">
    my div with labels and inputs
</div>

jQuery 代码。

$(document).ready(function() {
    $('.linkArrow').on('click', function() {
        $('#moreInfoInquiryCart').slideToggle(); 
    });
});

【讨论】：

您对显示的看法是正确的：无我的班级崩溃为我做了这个。我没有指定这个。