Question

我有一个小图像组合，我想在点击这些图像时显示文字（信息）。单击div时，淡化或滑动图像并显示“后面”文本。再次单击div时，隐藏文本并显示图像。

我所做的这个小提琴可能会清除这一点。 http://jsfiddle.net/0sr26qf4/

问题是，正如您所看到的，所有div都响应脚本。只有单击的div必须显示文本。我尝试过使用jQuery .next（）但是没有让它正常工作。

$(".text").hide();
$(".container").click(function(){
$("#image, #text").slideToggle("slow");
});

SOLUTION：

这就像一个魅力:)也改变了ID到课堂，谢谢你！

$(".text").hide();
$(".container").click(function(){
    $(this).find(".image, .text").slideToggle("slow");
});

Answer 1

请勿在您的网页上多次使用ID。你必须把它改成课。

更新了HTML：

<div class="container">
    <div class="image">image 1</div>
    <div class="text">
        info image 1 <br><br> 
        <a href="www.google.se">link</a>
    </div>
</div>

<div class="container">
    <div class="image">image 2</div>
    <div class="text">
        info image 2 <br><br> 
        <a href="www.google.se">link</a>
    </div>
</div>

<div class="container">
    <div class="image">image 3</div>
    <div class="text">
        info image 3 <br><br> 
        <a href="www.google.se">link</a>
    </div>
</div>

您必须使用$（this）字传递对所点击对象的引用。

JavaScript的：

$(".text").hide();
$(".container").click(function(){
    $(this).find(".image, .text").slideToggle("slow");
});

小提琴： http://jsfiddle.net/0sr26qf4/1/

Answer 2

Jquery find()

$(".text").hide();
$(".container").click(function(){
  $(this).find("#image, #text").slideToggle("slow");
});

Updated Demo

Answer 3

您可以简单地使用this作为选择器中的第二个参数（第二个参数提供搜索第一个选择器匹配的元素的上下文）：

＆＃13;

$(".text").hide();
$(".container").click(function() {
  $("#image, #text", this).slideToggle("slow");//add this to selector
});

＆＃13;

#image {
  background-color: green;
  width: 100%;
  height: 100%;
}
#text {
  background-color: red;
  width: 100%;
  height: 100%;
}
.container {
  border: 1px solid blue;
  width: 120px;
  height: 120px;
  float: left;
  margin: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="image">image 1</div>
  <div id="text" class="text">info image 1
    <br>
    <br> <a href="www.google.se">link</a>
  </div>
</div>

<div class="container">
  <div id="image">image 2</div>
  <div id="text" class="text">info image 2
    <br>
    <br> <a href="www.google.se">link</a>
  </div>
</div>

<div class="container">
  <div id="image">image 3</div>
  <div id="text" class="text">info image 3
    <br>
    <br> <a href="www.google.se">link</a>
  </div>
</div>

＆＃13;

添加该ID必须是唯一的，您应该使用类。

仅在单击的div上运行脚本

3 个答案: