通過點擊圖片顯示/隱藏div

Question

我希望能夠點擊圖像以顯示/隱藏div（帶文本）。我有這個工作的一個圖像，但我有多個圖像需要切換文本。

的JavaScript代碼

$(document).ready(function() { 

    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

    $('.show_hide').click(function() { 
     $("slidingDiv").slideToggle(); 
    }); 

}); 

的HTML：

<a href="#" class="show_hide"><img src="image.jpg"></a> 
<div class="slidingDiv"> 
    <h2>Title</h2> 
    <p>text</p> 
</div> 

所以這個工作，但它僅適用於一個圖像+ DIV。我想要第二個圖像和div，但使用相同的slidingDiv類，然後單擊第二個圖像切換第二個div顯然切換兩個div。

那麼我怎樣才能得到兩個圖像來切換自己的div，而不是在點擊兩個圖像之一的同時切換兩個div？

Answer 1

變化：

$("slidingDiv").slideToggle(); 

到

$(this).next(".slidingDiv").slideToggle(); 

jsFiddle example

$(".slidingDiv")，因爲你注意到沒有，選擇具有slidingDiv類的所有元素。要選擇slidingDiv類相對到您點擊的元素，請使用this來引用正在單擊的元素，然後.next(".slidingDiv")選擇下一個元素，只要它具有slidingDiv類。

Answer 2

你忘了在$("slidingDiv").slideToggle();

添加"."您也可以使用此

JsFiddle Example

$(document).ready(function() { 
 

 
    $(".slidingDiv").hide(); 
 
    $(".show_hide").show(); 
 

 
    $('.show_hide').click(function() { 
 
      
 
     //$(".slidingDiv").slideToggle(); 
 
     var isvisible = $(this).next('.slidingDiv').is(':visible'); 
 
     
 
     if (isvisible) { 
 
      $(this).next('.slidingDiv').hide(); 
 
     } else{ 
 
      $(this).next('.slidingDiv').show(); 
 
     } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<a href="#" class="show_hide"><img src="image.jpg" alt="img"/></a> 
 
<div class="slidingDiv"> 
 
    <h2>Title</h2> 
 
    <p>text</p> 
 
</div>

Answer 3

試試這個：

$('.show_hide').click(function(e) { 
     $(e.target).parent().next('.slidingDiv').slideToggle(); 
    }); 
}); 

e.target與給你click event

Answer 4

裹在源DOM元素在同一個DIV，做下一個步驟：

1. 發現圖像與.parent（）
2. 尋父父的.slidingDiv與.find（）
3. 隱藏/顯示與.slideToggle的.slidingDiv（）

$(document).ready(function() { 
 

 
    $(".slidingDiv").hide(); 
 
    $(".show_hide").show(); 
 

 
    $('.show_hide').click(function() { 
 
     $(this).parent().find(".slidingDiv").slideToggle(); 
 
    }); 
 

 
});

.fleft{ 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fleft"> <!-- This is the parent div --> 
 
    <a href="#" class="show_hide"><img style="width:100px;height:100px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></a> 
 
    <div class="slidingDiv"> 
 
    <h2>Title</h2> 
 
    <p>text</p> 
 
    </div> 
 
</div> 
 
<div class="fleft"> <!-- This is the parent div --> 
 
    <a href="#" class="show_hide"><img style="width:100px;height:100px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></a> 
 
    <div class="slidingDiv"> 
 
    <h2>Title</h2> 
 
    <p>text</p> 
 
    </div> 
 
</div> 
 
<div class="fleft"> <!-- This is the parent div --> 
 
    <a href="#" class="show_hide"><img style="width:100px;height:100px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></a> 
 
    <div class="slidingDiv"> 
 
    <h2>Title</h2> 
 
    <p>text</p> 
 
    </div> 
 
</div>