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

我有一個帶鏈接的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？是否可以只定義一次？

來源

2012-07-28 Ntoni

修訂答：

如果你不想定義<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/

來源

2012-07-28 14:12:08

ID必須是唯一，你可以使用班級，並嘗試以下內容：

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

DEMO

來源

2012-07-28 14:13:01 undefined

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

回答

相關問題