Javascript 是否仅为单个实例显示jquery幻灯片？

当我单击“分享你的想法”时，注释块会针对每个实例向下滑动。我想要的是，它应该只针对特定的部分，而不是全部。下面是我的代码片段。 实际上，我正在使用php动态创建所有部分，我的页面上几乎有10-15个部分，每个部分的注释块都会下降，即使我单击某个特定部分。 所以这是可能的，当我点击按钮时，不管我的页面有多少节，只有一个块向下滑动

$（'.down'）。单击（函数（）{
//设置效果类型
var效应='滑动'；
//设置所选效果类型的选项
var options={direction:'up'}；
//设置持续时间（默认值：400毫秒）
var持续时间=700；
$（'.card'）。切换（效果、选项、持续时间）；
});
#注释{
背景色：#535d92；
显示：无；
高度：60px；
}
#滑梯{
宽度：90%；
边缘顶部：14px；
左边距：14px；
z指数：1；
边界：无；
边界半径：2.5em；
背景：#fff；
-webkit外观：无；
大纲：无；
填充：0.85em 1.5em；
身高：10%；
}
.cd盒{
宽度：90%；
保证金：0自动；
}
.post页脚ul{列表样式：无}

拉加夫
Lorem ipsum dolor sit amet，奉献精英








沙拉德
Lorem ipsum dolor sit amet，奉献精英






您应该找到父元素并搜索注释部分

$(document).on('click', '.down', function () {
    //find the parent
    var $parent = $(this).parents('.cd-container');    

    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: 'up' };

    // Set the duration (default: 400 milliseconds)
    var duration = 700;

    $parent.find('.card').toggle(effect, options, duration);
});




我还更改了click处理程序，因为它们改变了您绑定它的方式，它不会在动态添加的元素上触发，只会在页面加载时触发，而且最好不要使用
。单击（）
，而是使用
。on（'click'）

$(document).on('click', '.down', function() {
     //code here
});

仅在单击的页面的同一部分中激活
.card
分享你的想法
元素。程序：

替换

 $('.card').toggle

与


另外，为了解决您的第二个问题，这些部分是动态的。
如果您的意思是在页面加载之后加载节，例如使用
ajax然后简单地将单击的钩子更改为容器
元素或文档，并让其委派单击。程序：

替换

$(".down").click(function() {

与


我注意到在中有多个元素带有
id=“comments”
你的HTML。这是无效的，因为DOM元素的
id
名称
必须是独一无二的。我建议你把它改成一节课，在教室里
css将
#comments
的规则更改为
。comments

请参见此处的工作示例：


$（.container”）。在（“单击“，.down”，函数（）上{
//设置效果类型
var效应='滑动'；
//设置所选效果类型的选项
变量选项={
方向：“向上”
};
//设置持续时间（默认值：400毫秒）
var持续时间=700；
$（this）.parents（'section.cd container'）.find（'.card'）.toggle（效果、选项、持续时间）；
});
#注释{
背景色：#535d92；
显示：无；
高度：60px；
}
#滑梯{
宽度：90%；
边缘顶部：14px；
左边距：14px；
z指数：1；
边界：无；
边界半径：2.5em；
背景：#fff；
-webkit外观：无；
大纲：无；
填充：0.85em 1.5em；
身高：10%；
}
.cd盒{
宽度：90%；
保证金：0自动；
}
.post页脚ul{
列表样式：无
}

拉加夫
Lorem ipsum dolor sit amet，奉献精英









沙拉德
Lorem ipsum dolor sit amet，奉献精英







有人在没有留下评论的情况下投了反对票。不知道为什么？
$(".down").click(function() {

$(".container").on("click", ".down", function() {