Question

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

它应该遵循：

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

＆＃13;

$(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();
    });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

检查下一个img的长度是否大于0。如果是真的显示下一个其他显示上一个图像。

＆＃13;

$("#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();
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery检查<li> cointains 2 img标签

1 个答案: