3

製品がリストされている Web サイトがあります。約 30 個の製品があります。現在、各製品の詳細に移動するためのリンクがあります。それらすべてを 1 つのページに配置し、javascript を使用して、クリック時に特定の div のコンテンツを変更したいと考えています。 . 私が知っていることは、1つのdivの表示をnoneに変更する30の関数を作成できることです..そして他のものを表示する..これを達成する方法..私はこのようなことをしています

function changeImg2() 
{
 $('#change_content').stop(true, true).fadeOut({ duration: slideDuration, queue: false }).css('display', 'none');
 $('#change_content2').stop(true, true).fadeIn({ duration: slideDuration, queue: false });     
}

ここに私が持っているdivのタイプがあります

<div id="change_content1">
                              <div class="viewport">
        <a id="btn" href="http://www.flickr.com/photos/matt_bango/3479048548/">
            <span class="dark-background">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
            <img src="images/HAND HELD POWER CUTTERS.jpg" alt="Northern Saw-Whet Owl" />
        </a>
    </div>

    <div class="viewport no-margin">
        <a href="http://www.flickr.com/photos/matt_bango/3478879694/">
            <span class="dark-background">Red-shouldered Hawk <em>Photo by Matt Bango</em></span>
            <img src="images/LIGHTING TOWERS.jpg" alt="Red-shouldered Hawk" />
        </a>
    </div>

    <div class="viewport">
        <a href="http://www.flickr.com/photos/matt_bango/3478189088/">
            <span class="light-background">Blue-headed Vireo <em>Photo by Matt Bango</em></span>
            <img src="images/MAGNETIC STAND DRILLS.jpg" alt="Blue-headed Vireo" />
        </a>
    </div>

   <div><input name="back" value="back" id="back_btn1" type="button"></div>
</div>

しかし、このコードは問題ありません...30 div 分のコードを繰り返す必要があるためです。これを達成するためのよりクリーンな方法はありますか。

4

3 に答える 3

0

次のようなものを使用します。

$('.myDiv').click(function() {
    $('.myDiv').hide(); //Or whatever function you like
    $(this).show(); //or whatever function you like
});

アイデアは、同じクラスのすべての div を非$(this)表示にしてから、クリックされた個々の div を操作するために使用されるということです。

同様のクラスを与えることですべてのdivをターゲットにするか、それらがすべて親ラッパー内にある場合は、次のようなものを使用できます$('.parent-wrapper > div')

コメントへの回答:

$(this)クリック関数などのイベント内で使用される場合、イベントがトリガーされた要素に関連します。この例では、単一の div のクリック イベントになります。つまり、それを使用して、他の div をターゲットにせずにその div を操作できます。

前述のように、同様のクラスまたはセレクターを使用すると、すべての div をターゲットにできるため、グループとして操作できます。ターゲット div が含まれる可能性が高いため、ターゲット div の前にグループを操作することに注意してください。

または、他のすべての div を操作するために使用できます$(this).siblings()。それらがクリックされた div と同じレベルにある場合、つまり兄弟である場合です。

于 2013-02-04T09:30:40.257 に答える