通過單擊圖像顯示/隱藏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，但是使用相同的slidingDiv類，然后單擊第二個圖像以切換第二個div顯然會切換兩個div。

那么，如何在單擊兩個圖像之一時如何獲得兩個圖像來切換它們自己的div，而不是同時切換兩個div？

Answer 1

更改：

$("slidingDiv").slideToggle();

至

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

jsFiddle示例

如您所注意到的， $(".slidingDiv")選擇帶有slideDiv類的所有元素。 要選擇相對於您單擊的元素的slideDiv類，請使用this來引用要單擊的元素，然后使用.next(".slidingDiv")選擇下一個元素，只要它具有class slideDiv。

Answer 2

您忘記添加"." 在$("slidingDiv").slideToggle();

你也可以用這個

JsFiddle示例

 $(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的源DOM元素。

Answer 4

將兩者包裝在同一個div中，然后執行以下步驟：

1. 使用.parent（）查找圖像的父級
2. 使用.find（）找到父級的.slidingDiv
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>