Javascript 重用代码以淡入淡出元素，这样我就不会'；我不必重复我的密码

我有一个带有链接的div，单击应该会在div本身的上方/内部打开一个jQuery对话框，带有fadein和out

我试着用这个图像来举例说明：

HTML

添加到购物车

jQuery

$（'.div'）。单击（函数（）{
$（'#dialog'）.fadeToggle（）；
});

CSS

.div{
背景色：#fff；
边框：1px实心#FFECA2；
宽度：123px；
文本对齐：居中；
填充：3px9px；
位置：相对位置；
}
#对话{
显示：块；
位置：绝对位置；
显示：无；
左：0；上：0；
宽度：100%；高度：100%；
背景色：#FFFEDF；
边框：1px实心#FFECA2；
宽度：123px；
文本对齐：居中；
填充：3px9px；
}​

到目前为止，我已经整理了一把小提琴：

现在，问题是：如果我有很多div元素，我需要定义吗

---

为每个div添加到购物车

？可以只定义一次吗？

更新的答案：

如果不想为每个div定义

添加到购物车

标记，可以使用jQuery在第一次单击每个div时应用它。（请注意，我将ID

对话框

改为class

对话框

。每个元素的ID必须是唯一的，如果我们要为每个div重用此代码，这是行不通的）

单击div时，我们会检查是否已经添加了

对话框

类，否则会追加它。然后我们像往常一样

fadeToggle（）

大概是这样的：

$('.div').click(function() {
    if ($(".dialog", this).length === 0) {
        $("<div class=\"dialog\">Add to cart</div>").appendTo(this);
    }
    $(".dialog", this).fadeToggle();
})​;

$（'.div'）。单击（函数（）{
如果（$（“.dialog”，this）.length==0）{
$（“添加到购物车”）。附录（此）；
}
$（“.dialog”，this.fadeToggle（）；
})​;

这样，您的标记就会简单一些：

<div class="div">
    lorem ipsum dolor sit amete
</div>
<div class="div">
    lorem ipsum dolor sit amete
</div>
<div class="div">
    lorem ipsum dolor sit amete
</div>​

同侧阴唇
同侧阴唇
同侧阴唇
​

一个工作示例：

ID必须是唯一的，您可以改用类，然后尝试以下操作：

$('.div').click(function() {
    $(this).find('.dialog').fadeToggle();
})