2

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

4

2 回答 2

2

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

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

演示

于 2012-07-28T14:13:01.757 回答
1

更新答案：

如果您不想<div class="dialog">Add to cart</div>为每个 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/

于 2012-07-28T14:12:08.483 回答