1

私はjavascriptとjQueryをあまり使いたくないので、詳細な回答を追加してください。

同じクラスの異なるsにjQueryエフェクトを追加する必要があります。これにより、クラスdivのあるdivをクリックすると、特定のコンテナーに別のdivが表示されます。また、同じクラスの divをクリックすると、同じコンテナに別のdivが表示されます。1iteminfo
2itempicsinfoinfo

私はこれを使うつもりでした：

$(document).ready(function(){
    $("#box1").click(function(){
        $("#box1").fadeOut(250);
    });
    $("#box1").click(function(){
        $("#box2").fadeIn(500);
    });
});

ただし、これは、約10div秒と別の10秒の表示と非表示を使用する場合には無効ですdiv。
私は多くのコード行を使用しますが、それが機能するかどうかはわかりません。

4

4 に答える 4

1

セレクター$(".item")を使用して、関心のあるすべてのdivs を取得できます。

クラスセレクターは、必要なもののように聞こえます: http://api.jquery.com/class-selector/

クリック コール内に入ると、ID を区別して別のアクションを実行できます。ただし、クラス セレクターを使用すると、関心のあるすべての div でクリック イベント ハンドラーを使用できます。

以下のサンプルコード

$(document).ready(function(){
    $(".item").click(function(e){
        // output the id of the clicked item
        console.log($(e.target).attr("id"));

        if($(e.target).attr("id")=="box1"){
            //do something for if the clicked item is box1.
            $("#box1").fadeOut(250);
            $("#box2").fadeIn(500);            
        }

    });
});
于 2012-12-20T22:28:13.140 に答える
0

あなたのhtmlがなければ、正確に言うのは難しいです. しかし、ここが出発点です。

既存の jQuery はそのようで、ID ですべての div を取得しています。

$(document).ready(function(){
    $("#box1").click(function(){
        $("#box1").fadeOut(250);
    });
    $("#box1").click(function(){
        $("#box2").fadeIn(500);
    });
});

改善は、ID ではなくクラスを使用することであり、そのようなことを行うことができます。

注:以下では、別のクラスまたは追加のクラスをitempicdiv に割り当てて、写真の表示をトリガーすることを前提としています。

$(document).ready(function(){
    $(".item").click(function(){
        $(".info").fadeOut(250);
    });
    $(".itempic").click(function(){
        $(".pics").fadeIn(500);
    });
});

これと同じ機能を持つ複数の div がある場合 (たとえば、多数の製品があり、それぞれに情報ボックスと画像ボックスがある場合)、「含む」ことで何かを行う必要があります。指定されたアイテムへのセレクター。いくつかの例の HTML を使用すると、それを考慮した回答を提供できます。

于 2012-12-20T22:31:22.187 に答える
0

これに似たHTMLを構造化します

<div id="container">
   <div id="info">info contents</div>
   <div id="pic">pic contents</div>
</div>

<div class="item" data-related="#info">your contents</div>
<div class="item" data-related="#pic">your contents</div>
..etc.

と使用

$(function(){
    $('#container').children().hide(); // initial hiding 

    $('.item').click(function(){
        var relatedId = $(this).data('related');
        $(relatedId).show().siblings().hide();
    });
});

http://jsfiddle.net/gaby/mTSZv/のデモ

于 2012-12-20T22:36:16.017 に答える
0

jQuery で選択する場合、ID には #id_name を、クラスには .class_name を使用する必要があります。div、tr、td、... を選択する場合、名前の前に特別な記号は必要ありません。そう：

$('#id_name').click(); // click on every item of the ID 'id_name'
$('.class_name').hide(); // make all items invisible that have class 'class_name'
$('tr').addClass('class_name'); // adds the class 'class_name' to all tr items

ID は一意です。クラスは複数回表示できます。

jQuery APIの例を読んでください

JS を使い始めるには、jQuery が非常に優れています。非常に高速ですが、jQuery は、これらの短いコマンドを可能にするためにロードする必要があるライブラリであることを忘れないでください。純粋な JavaScript の方が高速です。jQuery は JS であるため、JS と jQuery を組み合わせることができることを忘れないでください。純粋な JS に切り替えると、スクリプトが正確に何をするかを確認することもできます。

于 2012-12-20T22:41:46.533 に答える