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 にマークアップを定義したくない場合は<div class="dialog">Add to cart</div>、jQuery を使用して、各 div が最初にクリックされたときにマークアップを適用できます。dialog(代わりに IDをクラスに変更したことに注意してください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 に答える