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

Question

我有一个带有链接的 div，点击后应该会在 div 本身上方/内部打开一个带有淡入淡出的 jQuery 对话框。

我试着用这张图片来举例说明: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 id="dialog"> Add to cart </div>对于每个分区？是否可以只定义一次？

Answer 1

ID 必须唯一，您可以改用类并尝试以下操作:

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

DEMO