jQueryでdivを表示/非表示

Question

jQueryで、対応する項目の説明とともにdivを表示できるようにする必要があります。画像1の

<img src="img1.png" id="img1"> 

<div id="div1" style="display:none"> 
description 1 
</div> 

<img src="img2.png" id="img2"> 

<div id="div2" style="display:none"> 
description 2 
</div> 

<img src="img3.png" id="img3"> 

<div id="div3" style="display:none"> 
description 3 
</div> 

クリックすると、DIV1を表示する必要があります。ここでは

は、私がこれまで持っているものです。一度に開くことができるdivは1つだけです。しかし、私はjQueryがこれを解決するための最善の方法だと考えています。今、それがどのように行われるか確認してください...

Answer 1

$(document).ready(function(){ 
    $('#img1').click(function(){ 
    $('#div1').show();//or use .toggle() to show/hide 
    }); 
}); 

あなたはいつもちょうど画像とdivのクラスを与え、画像の後次のdivをトグルし、一般的にそれを処理している場合。

Ex: <img class="toggleImage"/><div class="toggledDiv"></div> 

$('.toggleImage').click(function(){ 
    $(this).next('.toggledDiv').toggle(); 
}); 

そして唯一のdiv要素が一度に開いていることを保証するために、次の操作を行います。

$('.toggleImage').click(function(){ 
    $(this).siblings('.toggledDiv').hide(); 
    $(this).next('.toggledDiv').show(); 
}); 

Answer 2

$('#img1').click(
     function() { 
      $('#div1').toggle(); 
}); 

Answer 3

バインドのdivを示した画像へのクリックイベントを。

$("#img1").click(function() { 
    $("#div1").show(); 
} 

Answer 4

jQueryには、特定のアイテムを表示するために使用できるshow()メソッドがあります。

コンテキストに基づいて表示/非表示にする場合は、toggle()を使用できます。

Answer 5

$("img").bind("click", function(){ 
    var divid = $(this).attr(id); 
    divid = divid.replace("img","div"); 
    $("#"+divid).toggle(); 
}); 

Answer 6

function showOnly(inDiv) 
{ 
    $("#div1").hide(); 
    $("#div2").hide(); 
    $("#div3").hide(); 

    $(inDiv).show(); 
} 

$(document).ready(function(){ 
    $("#img1").click(showOnly("#div1")); 
    $("#img2").click(showOnly("#div2")); 
    $("#img3").click(showOnly("#div3")); 
}); 

は、リストでこれを行う方法、またはID番号のワイルドカードを使用してあります - ...しかし、私は、これはあなたが正しい方向に軌道に乗るだろうと確信している