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

【问题标题】：Reuse code for fading an element/in and out, so that I don't have to repeat my code重用代码淡入淡出元素，这样我就不必重复我的代码
【发布时间】：2012-07-28 14:09:43
【问题描述】：

我有一个带有链接的 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> 对应每个 div？是否可以只定义一次？

【问题讨论】：

标签： javascript jquery dialog

【解决方案1】：

ID 必须是唯一的，您可以改用类并尝试以下方法：

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

DEMO

【讨论】：

【解决方案2】：

更新答案：

如果您不想为每个 div 定义 <div class="dialog">Add to cart</div> 标记，您可以使用 jQuery 在第一次单击每个 div 时应用它。（请注意，我将 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/

【讨论】：