Question

我在div中显示特定的img有问题（显示无）：

<a onclick="showhide_class()" title="show" class="showhide"><img src="image_small_1.jpg" /></a>
<div class="content"><img src="image_big_1.jpg" />
    <a onclick="showhide_class()"><img class="close" src="x.png" alt="x"></a>
</div>
<a onclick="showhide_class()" title="show" class="showhide"><img src="image_small_2.jpg" /></a>
<div class="content"><img src="image_big_2.jpg" />
    <a onclick="showhide_class()"><img class="close" src="x.png" alt="x"></a>
</div>
<a onclick="showhide_class()" title="show" class="showhide"><img src="image_small_..n.jpg" /></a>
<div class="content"><img src="image_big_..n.jpg" />
    <a onclick="showhide_class()"><img class="close" src="x.png" alt="x"></a>
</div>

所以有js代码：

function showhide_class(){
  var elements = document.getElementsByClassName("content");
    for (var i = 0; i < elements.length; i++) {
      if (elements[i].style.display == 'none') {
        elements[i].style.display = 'block';
      } else {
        elements[i].style.display = 'none';
      }
    }
  }

当我点击＆＃34; image_small_2.jpg＆＃34;我需要得到＆＃34; image_big_2.jpg＆＃34;

但是当我点击＆＃34; image_small_1.jpg＆＃34;或第二张图片 - 显示最后一张图像＆＃34; image_big_..n.jpg＆＃34;。

我也试图在jQuery中使用img：

$(function(){
  $(".showhide").on("click", function(){
    $(".content").css("display","block");
  });
});

它也不起作用。

Answer 1

为您的内部a提供一个独特的类，例如hide，并删除所有类别的onclick属性：

<a title="show" class="showhide">show<img src="image_small_1.jpg" /></a>
<div class="content"><img src="image_big_1.jpg" />
    <a class="hide"><img class="close" src="x.png" alt="x">close</a>
</div>
<a title="show" class="showhide">show<img src="image_small_2.jpg" /></a>
<div class="content"><img src="image_big_2.jpg" />
    <a class="hide"><img class="close" src="x.png" alt="x">close</a>
</div>
<a title="show" class="showhide"><img src="image_small_..n.jpg" /></a>
<div class="content"><img src="image_big_..n.jpg" />
    <a class="hide"><img class="close" src="x.png" alt="x"></a>
</div>

然后在jQuery中，附加您拥有的两种a类型的事件处理程序：

$('a.showhide').click(function(){
    $(this).nextAll('.content:first').toggle();
});

$('a.hide').click(function(){
    $(this).closest('.content').toggle();
});

在hide中获取特定元素

1 个答案: