重复使用淡入淡出元素的代码，以便我不必重复我的代码

问题描述：

我有一个带链接的div，点击时应该在淡入淡出之前在div本身之上打开一个jQuery对话框。重复使用淡入淡出元素的代码，以便我不必重复我的代码

我已经试过此图片examplify它：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？是否可以只定义一次？

答

修订答：

如果你不想定义<div class="dialog">Add to cart</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/

答

ID必须是唯一，你可以使用班级，并尝试以下内容：

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

DEMO

重复使用淡入淡出元素的代码，以便我不必重复我的代码

相关推荐