Question

我有一个带链接的div，点击后应该在div上面/内部用fadein打开一个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

<div id="dialog"> Add to cart </div>？是否可以只定义一次？

Answer 1

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

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

DEMO

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/

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

2 个答案: