0

ユーザーがクリックしたものに基づいて、複数の div を表示/非表示にする必要があります。

そこで彼らはリンクをクリックします:

<a href="#" id="image1">Click me to show</a>

次に、jQuery を使用して div を表示します。

$(document).ready(function(){

    $("#image1").click(function () {
    $("#image1_view").fadeIn();
    return false; 
    e.preventDefault(); 
    });
});

私がする必要があるのは、これを複数回実行して、クリックすると正しいdivが表示されるページに複数のリンクがあるようにすることです。

上記のコードを何度もコピーして貼り付ける以外に、より簡単な方法は何ですか? リンクのIDをjQueryに渡して、どのdivを表示するかを知るにはどうすればよいですか?

ありがとう！

4

3 に答える 3

2

リンクと画像の両方に、次のように互いに似た ID があると仮定します。

<a href="#" id="image1">Click me to show</a>
<a href="#" id="image2">Click me to show</a>
<a href="#" id="image3">Click me to show</a>

<img src="img1.png" id="image1_view" />
<img src="img2.png" id="image2_view" />
<img src="img3.png" id="image3_view" />

など、次のことができます。

$(document).ready(function(){
    $('a[id^="image"]').on('click', function(e) {
        e.preventDefault(); 
        $('#'+ this.id +'_view').fadeIn().one('click', function() {
            $(this).fadeOut();
        });
    });
});
于 2013-04-03T15:55:58.127 に答える
0

すべての<a>タグにダミーの CSS クラス (例: ClassName1) を付けます。

次のようにコードを編集します。

$(document).ready(function(){

    $(".ClassName1").click(function () {
    $("#" + this.id + "_view").fadeIn();
    return false; 
    e.preventDefault(); 
    });
});

Div の ID を ImageID_view に維持する場所

于 2013-04-03T15:56:30.397 に答える
0

ID でフェードする要素を指定できると仮定すると、これは機能するはずです (要素の属性div内に ID 参照を渡します)。ahref

$('a.fadeIn').on('click', function(e) {  
    e.preventDefault();
    var the_div = $($(this).attr('href'));
    the_div.fadeIn('fast');
});
于 2013-04-03T15:55:58.073 に答える