javascript - jQuery检查<li>是否包含2个img标签

我想检查单个li标签是否包含单个或2个img标签，并且仅在有2个img标签时才运行jQuery脚本。现在，当一个li仅包含一个图像时，单击后消失。

它应该工作如下：


加载时-显示第一张图片，隐藏第二张图片
单击时-隐藏第一张图片，显示第二张图片
单击第二张图片-隐藏第二张图片，显示第一张图片

$(document).ready(function () {
    $("#list-of-images li img:first-child").click(function () {
		$(this).hide();
		$(this).next().show();
    });
	    $("list-of-images li img:nth-child(2)").click(function () {
		$(this).hide();
		$(this).prev().show();
    });
});

#list-of-images li img:nth-child(2) {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="list-of-images">
<li>
<img src="https://cdn.infobeamer.com/s/6bd893/img/hosted-restaurant.png" />
<img src="https://cdn.infobeamer.com/s/e67487/img/hosted-your-usecase.png" />
</li>

<li>
<img src="https://cdn.infobeamer.com/s/6bd893/img/hosted-restaurant.png" />
<img src="https://cdn.infobeamer.com/s/e67487/img/hosted-your-usecase.png" />
</li>
</ul>

最佳答案

首先，检查单击的li中的长度图像。

检查下一个img的长度是否大于0。如果为true，则显示下一个，否则显示前一个图像。

$("#list-of-images li img").click(function () {
  if($(this).parent().find('img').length == 2) {
    $(this).hide();
    if($(this).next('img').length> 0)
      $(this).next('img').show();
    else
      $(this).prev('img').show();
  }
});

#list-of-images li img:nth-child(2) {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="list-of-images">
<li>
<img src="https://cdn.infobeamer.com/s/6bd893/img/hosted-restaurant.png" />
<img src="https://cdn.infobeamer.com/s/e67487/img/hosted-your-usecase.png" />
</li>

<li>
<img src="https://cdn.infobeamer.com/s/6bd893/img/hosted-restaurant.png" />
<img src="https://cdn.infobeamer.com/s/e67487/img/hosted-your-usecase.png" />
</li>
</ul>