重用代码来淡入淡入淡出元素，这样我就不必重复我的代码

Question

我有一个带有链接的div，点击后应该会在div本身上方/内部打开一个jQuery对话框，其中包含fadein和out。

我试着用这张图片举例说明：http://img593.imageshack.us/img593/9852/exampled.jpg

HTML

<div id="dialog" title="Basic dialog" style="display: none">Add to cart</div>

jQuery

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

CSS

.div{
    background-color: #fff;
    border: 1px solid #FFECA2;
    width: 123px;
    text-align: center;
    padding: 3px 9px;
    position:relative;
}
#dialog {
    display:block;
    position:absolute;
    display:none;
    left:0; top:0;
    width:100%; height:100%;
    background-color: #FFFEDF;
    border: 1px solid #FFECA2;
    width: 123px;
    text-align: center;
    padding: 3px 9px;
}​

到目前为止，我已经把我所拥有的东西整理好了：http://jsfiddle.net/725Me/

现在，问题是：如果我有很多div元素，我是否必须定义

每个div的<div id="dialog"> Add to cart </div>？可以只定义一次吗？

Answer 1

ID必须是唯一，您可以使用类，并尝试以下操作：

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

演示

Answer 2

更新的答案：

如果不想为每个div定义<div class="dialog">Add to cart</div>标记，可以在第一次单击每个div时使用jQuery应用它。（请注意，我将ID dialog改为类dialog。ID必须对每个元素都是唯一的，如果我们要对每个div重用此代码，这是行不通的）。

当点击div时，我们会检查dialog类是否已经添加，否则我们会追加它。然后像往常一样fadeToggle()。

类似这样的东西：

$('.div').click(function() {
    if ($(".dialog", this).length === 0) {
        $("<div class="dialog">Add to cart</div>").appendTo(this);
    }
    $(".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>​

一个工作示例：http://jsfiddle.net/725Me/4/