jQuery.show（）出现问题

我正在尝试用jQuery创建非常简单的图像浏览器。我这样做只是为了学习，它不会在任何项目在这个时候使用

我的图片和缩略图如下：

<div class="images">
  <img src="http://www.dummyimage.com/400x200/222/fff.jpg" alt="" data-idi="1"/>
  <img src="http://www.dummyimage.com/400x200/534/fff.jpg" alt="" data-idi="2"/>
  <img src="http://www.dummyimage.com/400x200/345/fff.jpg" alt="" data-idi="3"/>
  <img src="http://www.dummyimage.com/400x200/fed/111.jpg" alt="" data-idi="4"/>
</div>

<div class="thumbs">
  <button data-idb="1"><img src="http://www.dummyimage.com/50x50/222/fff.jpg" alt="" /></button>
  <button data-idb="2"><img src="http://www.dummyimage.com/50x50/534/fff.jpg" alt="" /></button>
  <button data-idb="3"><img src="http://www.dummyimage.com/50x50/345/fff.jpg" alt="" /></button>
  <button data-idb="4"><img src="http://www.dummyimage.com/50x50/fed/111.jpg" alt="" /></button>   
</div>

    var imgs = $('.images');
    $('.images img').hide()
    $.each(imgs, function(index, val) {
        $(val).children(":first").show();
        $('.thumbs button').on( "mouseenter", function(e) {
             var idb = $(this).data("idb"),
                 set = $(this).parent().data("set");
             $('body').find("[data-set='" + set + "']").children("img").hide();
             var img = $('.images').find("[data-idi='" + idb + "']").show();
        });
    });

现在我想添加另一组图像，并使用

.each（）

函数包装脚本。但我在一开始就遇到了一个问题，当我试图只显示第一个图像时：

var imgs = $('.images').hide();
$.each(imgs, function( index, val ) {
    var firstImage = $(this).children(":first");
    console.log(firstImage);
    firstImage.show();
});

---

正确的形象得到了慰藉，但并没有表现出来，这是例外。现场示范。你能帮我解决这个问题吗？TIA

您已经隐藏了父元素

.images

元素

调用

.show（）

后，在隐藏的父级中有一个可见的元素

---

您需要通过写入

$（'.images img'）

来选择

元素本身。您已经隐藏了父

.images

元素

调用

.show（）

后，在隐藏的父级中有一个可见的元素

---

您需要通过写入

$（'.images img'）

来选择

元素本身，隐藏所有图像，然后显示第一个图像：

$('.images img').hide().first().show()

---

隐藏所有图像，然后显示第一个图像：

$('.images img').hide().first().show()

看一看

我更改了你的一些代码

编辑：我更改了上一个URL，因为我更改了使用过滤功能的代码。

看一看

我更改了你的一些代码

---

编辑：我更改了上一个URL，因为我更改了使用过滤功能的代码。

谢谢大家的回答，我已经对他们全部进行了投票。我已经设法改进了我的脚本，现在HTML结构如下所示：

<div class="images" data-set='1'>
  <img src="http://lorempixel.com/400/200/sports/1/" alt="" data-idi="a1" />
  <img src="http://lorempixel.com/400/200/sports/2/" alt="" data-idi="a2" />
  <img src="http://lorempixel.com/400/200/sports/3/" alt="" data-idi="a3" />
  <img src="http://lorempixel.com/400/200/sports/4/" alt="" data-idi="a4" />
</div>
<div class="thumbs" data-set="1">
  <button data-idb="a1"><img src="http://lorempixel.com/50/50/sports/1/" alt="" /></button>
  <button data-idb="a2"><img src="http://lorempixel.com/50/50/sports/2/" alt="" /></button>
  <button data-idb="a3"><img src="http://lorempixel.com/50/50/sports/3/" alt="" /></button>
  <button data-idb="a4"><img src="http://lorempixel.com/50/50/sports/4/" alt="" /></button>   
</div> 

---

还有。

谢谢大家的回答，我已经全部投了赞成票。我已经设法改进了我的脚本，现在HTML结构如下所示：

<div class="images" data-set='1'>
  <img src="http://lorempixel.com/400/200/sports/1/" alt="" data-idi="a1" />
  <img src="http://lorempixel.com/400/200/sports/2/" alt="" data-idi="a2" />
  <img src="http://lorempixel.com/400/200/sports/3/" alt="" data-idi="a3" />
  <img src="http://lorempixel.com/400/200/sports/4/" alt="" data-idi="a4" />
</div>
<div class="thumbs" data-set="1">
  <button data-idb="a1"><img src="http://lorempixel.com/50/50/sports/1/" alt="" /></button>
  <button data-idb="a2"><img src="http://lorempixel.com/50/50/sports/2/" alt="" /></button>
  <button data-idb="a3"><img src="http://lorempixel.com/50/50/sports/3/" alt="" /></button>
  <button data-idb="a4"><img src="http://lorempixel.com/50/50/sports/4/" alt="" /></button>   
</div> 

和