複数のdivの表示/非表示を改善する方法はありますか？

私はすべてクリックするとdivを表示する必要がある8つのリンクがあります。一度に1つのdivだけを表示したいので、新しいリンクをクリックすると、現在表示されているdivが非表示になり、新しいdivが表示されます。これまで私は動作するjQueryソリューションを持っていましたが、それは醜いです。私が欲しいものを達成するためのより簡単な/より正しい方法がありますか？複数のdivの表示/非表示を改善する方法はありますか？

<div> 
<a href="#" class="link">Click Link</a><br /> 
<a href="#" class="link2">Click Link 2</a><br /> 
<a href="#" class="link3">Click Link 3</a><br /> 
<a href="#" class="link4">Click Link 4</a><br /> 
<a href="#" class="link5">Click Link 5</a><br /> 
<a href="#" class="link6">Click Link 6</a><br /> 
<a href="#" class="link7">Click Link 7</a><br /> 
<a href="#" class="link8">Click Link 8</a><br /> 
<div class="testVid hideDiv" style="background:pink; height:200px">Test Vid Div<br /><br /><span class="close">CLOSE</span></div> 
<div class="testVid2 hideDiv" style="background:pink; height:200px">Test Vid Div 2<br /><br /><span class="close2">CLOSE 2</span></div> 
<div class="testVid3 hideDiv" style="background:pink; height:200px">Test Vid Div 3<br /><br /><span class="close3">CLOSE 3</span></div> 
<div class="testVid4 hideDiv" style="background:pink; height:200px">Test Vid Div 4<br /><br /><span class="close4">CLOSE 4</span></div> 
<div class="testVid5 hideDiv" style="background:pink; height:200px">Test Vid Div 5<br /><br /><span class="close5">CLOSE 5</span></div> 
<div class="testVid6 hideDiv" style="background:pink; height:200px">Test Vid Div 6<br /><br /><span class="close6">CLOSE 6</span></div> 
<div class="testVid7 hideDiv" style="background:pink; height:200px">Test Vid Div 7<br /><br /><span class="close7">CLOSE 7</span></div> 
<div class="testVid8 hideDiv" style="background:pink; height:200px">Test Vid Div 8<br /><br /><span class="close8">CLOSE 8</span></div> 

$(document).ready(function(){ 
    $("a.link").click(function(){ 
     $(".testVid").show(); 
     $(".testVid2").hide(); 
     $(".testVid3").hide(); 
     $(".testVid4").hide(); 
     $(".testVid5").hide(); 
     $(".testVid6").hide(); 
     $(".testVid7").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close").click(function(){ 
     $(".testVid").hide(); 
     }); 

    $("a.link2").click(function(){ 
     $(".testVid2").show(); 
     $(".testVid").hide(); 
     $(".testVid3").hide(); 
     $(".testVid4").hide(); 
     $(".testVid5").hide(); 
     $(".testVid6").hide(); 
     $(".testVid7").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close2").click(function(){ 
     $(".testVid2").hide(); 
     }); 

    $("a.link3").click(function(){ 
     $(".testVid3").show(); 
     $(".testVid2").hide(); 
     $(".testVid").hide(); 
     $(".testVid4").hide(); 
     $(".testVid5").hide(); 
     $(".testVid6").hide(); 
     $(".testVid7").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close3").click(function(){ 
     $(".testVid3").hide(); 
     }); 

    $("a.link4").click(function(){ 
     $(".testVid4").show(); 
     $(".testVid2").hide(); 
     $(".testVid3").hide(); 
     $(".testVid").hide(); 
     $(".testVid5").hide(); 
     $(".testVid6").hide(); 
     $(".testVid7").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close4").click(function(){ 
     $(".testVid4").hide(); 
     }); 

    $("a.link5").click(function(){ 
     $(".testVid5").show(); 
     $(".testVid2").hide(); 
     $(".testVid3").hide(); 
     $(".testVid4").hide(); 
     $(".testVid").hide(); 
     $(".testVid6").hide(); 
     $(".testVid7").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close5").click(function(){ 
     $(".testVid5").hide(); 
     }) 

    ;$("a.link6").click(function(){ 
     $(".testVid6").show(); 
     $(".testVid2").hide(); 
     $(".testVid3").hide(); 
     $(".testVid4").hide(); 
     $(".testVid5").hide(); 
     $(".testVid").hide(); 
     $(".testVid7").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close6").click(function(){ 
     $(".testVid6").hide(); 
     }); 

    $("a.link7").click(function(){ 
     $(".testVid7").show(); 
     $(".testVid2").hide(); 
     $(".testVid3").hide(); 
     $(".testVid4").hide(); 
     $(".testVid5").hide(); 
     $(".testVid6").hide(); 
     $(".testVid").hide(); 
     $(".testVid8").hide(); 
    }); 
    $(".close7").click(function(){ 
     $(".testVid7").hide(); 
     }); 

    $("a.link8").click(function(){ 
     $(".testVid8").show(); 
     $(".testVid2").hide(); 
     $(".testVid3").hide(); 
     $(".testVid4").hide(); 
     $(".testVid5").hide(); 
     $(".testVid6").hide(); 
     $(".testVid7").hide(); 
     $(".testVid").hide(); 
    }); 
    $(".close8").click(function(){ 
     $(".testVid8").hide(); 
     }); 
    $(".hideDiv").css('display', 'none'); 
});

Fiddle Here

出典

2011-07-28 ComatoseDuck

jQueryセレクタを使用します。あなたのすべてのクラス属性をID属性に変更し、番号なしのものに1を追加しました。ここにフィドルがあります。あなたのhtmlには何も変更せずに

http://jsfiddle.net/BLXWS/7/

出典

2011-07-28 16:17:33

美しい。あなたは 'a [id^=" link "]'と 'var vid_id = $（this）.attr（" id "）というものを私に説明してもらえますか？replace（" link "、" #testVid "）;' mean so私はより良い理解を持つことができますか？ Ofcourse。 – ComatoseDuck

。 'a [id^=" link "]'はjQueryセレクタです。基本的に 'link'で始まるID属性を持つすべての' a'タグをフィルタリングします。次の行では、リンククリックのID属性を取得し、 'link2'と答えて、そのIDを対応するtestVidに変換します。リンクを'＃testVid'に置き換えるだけで、 '＃testVid2'となります。私はちょうどそれに応じてそれを表示/非表示することができ私はセレクタを扱う際にID属性を使用するのが好きです。なぜなら、たった1つ以上のクラスを使用することが多いからです。 –

すべての項目の共通クラス
が（同じセレクタで）すべての機能を非表示に一度$(".commonClass").click(..)
で全てにクリックハンドラをアタッチし、のみ表示し割り当てます現在$(this)

出典

2011-07-28 15:58:32 Bozho

各divはh ave a classとidを指定します。クラスは、あなたが持っているdivのタイプをグループ化するために使用されるべきです。 idは各divに固有でなければなりません。

あなたはリスの写真が含まれている車やいくつかの写真が含まれているいくつかのdivを持っているのであれば、あなたは私がリンクやdivのための共通のクラスでupdated your fiddleをしたdiv要素の二つのクラス

<div class="PhotosCars" id="Car1"></div> 
<div class="PhotosCars" id="Car2"></div> 
<div class="PhotosCars" id="Car3"></div> 
<div class="PhotosSquirrels" id="Squirrels1"></div> 
<div class="PhotosSquirrels" id="Squirrels2"></div> 
<div class="PhotosSquirrels" id="Squirrels3"></div> 

// hide squirrels 
$(".PhotosSquirrels").hide(); 

// hide cars 
$(".PhotosCars").hide(); 

// show single photo 
$("#Car3").show();

出典

2011-07-28 16:01:17

ありがとうございました！私はちょうど正解の例*を入力しようとしていました（この質問が欠けていたものでした）。今私は仕事に行き、私の家族を養うためにお金を稼ぐことができます。 – Malvolio

@Malvolio - 良い点とLOL！私の劣った答えを削除しました。 – karim79

私は正しい答えがあり、助けてくれた場合は、チェックボックスをオンにしてください。 jQueryは素晴らしいです。私のWebサイトのjQueryの例で、新しいQRコードジェネレータをチェックしてください。 http://www.evikjames.com/ –

を持っている必要があり、とにかくユニークだったので、IDで数字のものを変更しました。これで次のことができます。

$(".showlink").click(function(e){ 
    e.preventDefault(); 
    $(".testVid").hide() 
    $("#vid"+$(this).attr("id").replace("link","")).show();  
});

出典

2011-07-28 16:09:59 Litek

あなたが提供したソリューションと更新されたフィドルがうまくいきません – ComatoseDuck

申し訳ありません。 'preventDefault（）'を忘れました。編集され更新されたフィドル。 – Litek

ソリューション：

$("a").click(function(){ 
    $('div[class^="testVid"]').hide(); 
    $('div[class="testVid'+ $(this).attr('class').replace(/link/, '') +'"]').show(); 
}); 

$('span[class^="close"]').click(function() { 
    $(this).parent().hide(); 
});

私はあなたがそれらがあなたの命を救うことができる、jQuery Selectorsでバッターを見てお勧めします。

出典

2011-07-28 16:24:12

あまりにも悪い私は2つの答えを受け入れることはできません。私は間違いなくセレクターを磨くつもりです！ – ComatoseDuck

接続/処理したい要素に共通する属性/値を使用します。あなたのケースでは

は何をあなたのリンクやdivのは、一緒に関連して、そのクラス名の一部である（リンク番号とdivの番号;彼らはaとdivクラス名link1 --> testVid1の内側に隠されています）。

これはあなたのリンクが関連するものです（この場合、クラス名の最初の部分に焦点を当てます）。

// this selector selects all a tags of which class attribute contains value of "link" 
$('a[class*="link"]')

同じことがあなたのdivを閉じスパンのために行く：

$('span[class*="close"]')

だからあなたのJavaScript/jQueryのコード（不要にだからあなたはそれらの一つ一つのための機能をクリックしますが、一つだけ必要はありません正確にjQueryのは、特にselectors非常に有用であるあなたのような場合に

$(function() { 
    $('a[class*="link"]').click(function(e){ 
     // prevent default behaviour of anchor tag 
     e.preventDefault(); 
     //reset current selection (hide all divs) 
     $('div[class*="testVid"]').hide(); 
     // get clicked anchor tag number 
     $this = ($(this).attr("class")).replace("link", "testVid"); 
     // find and display div that is related to clicked a element 
     $('.'+$this).show(); 
    }); 

    $('span[class*="close"]').click(function(e){ 
     // prevent default behaviour of anchor element 
     e.preventDefault(); 
     //get parent element of clicked anchor element and hide it 
     $(this).parent('div').hide(); 
    }); 

    });

：変更のhtmlコード）は次のようになります。

出典

2011-07-28 16:49:50 Janez

複数のdivの表示/非表示を改善する方法はありますか？

答えて

関連する問題