获取隐藏中的特定元素

Get specific element inside hide

本文关键字：元素 隐藏 获取      更新时间：2023-09-26

在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';
      }
    }
  }

当我点击"image_small_2.jpg"时，我需要获得"image_big_2.jpg"

但当我点击"image_small_1.jpg"或第二个图像时，它会显示最后一个"image_big_..n.jpg"。

我还尝试在jQuery:中获取img

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

它也不起作用。

给你的内部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();
});
相关文章：