показать/скрыть 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 example

$(".slidingDiv"), как вы заметили, выбирает все элементы с классом slidingDiv. Чтобы выбрать класс slideDiv относительный к элементу, на который вы нажимаете, используйте this для обращения к элементу, на который вы нажимаете, а затем .next(".slidingDiv"), чтобы выбрать следующий элемент, если он имеет класс slideDiv.

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 с дать вам исходный DOM элемент для click event

Answer 4

Wrap как в том же самом ДИВ и сделать следующие шаги:

1. найти родитель изображений с .parent()
2. находит .slidingDiv родителя с .find()
3. скрыть/показать .slidingDiv с .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>