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类 relative ，请使用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的源DOM元素。

Answer 4

将两者包装在同一个div中并执行以下步骤：

使用.parent（）
使用.find（）
使用.slideToggle（）

$(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>

单击图像显示/隐藏div

4 个答案: