javascript - jQuery 以通用方式隐藏除第一个图像之外的所有图像

Question

我只想显示第一张图片并隐藏其他图片，这是 HTML 的样子:

<div class="slider-image">
  <img src="html.png" alt="Html" />
  <img src="css.png" alt="Css" />
  <img src="jquery.png" alt="jQuery" />
</div>

在此示例中，我想查看 html.png，但我必须考虑更多图像，因此我必须找到一个通用的解决方案。我试过:

$("div.slider-image").hide();
$("div.slider-image").eq(0).show();

但是它显示了每张图片，有人可以帮助我吗？

Answer 1

使用.not

工作片段:

$('.slider-image img').not(':eq(0)').hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider-image">
    <img src="html.png" alt="Html" />
    <img src="css.png" alt="Css" />
    <img src="jquery.png" alt="jQuery" />
</div>

或者使用:not(:first-child)

工作片段:-

$('.slider-image img:not(:first-child)').hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider-image">
    <img src="html.png" alt="Html" />
    <img src="css.png" alt="Css" />
    <img src="jquery.png" alt="jQuery" />
</div>