JQuery проверяет, содержит ли <li> 2 тега img

Я хотел бы проверить, совпадает ли один тег li с одним или двумя тегами img, и запустить сценарий jQuery только при наличии двух тегов img. Теперь, когда один 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>

javascript jquery

07.06.2018 12:12

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сначала проверьте длину изображения в выбранном li.

Проверьте, больше ли длина следующего img 0 или нет. Если это правда, показать следующее, иначе показать предыдущее изображение.

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

Большое спасибо, это именно то, что я искал.

— 07.06.2018 12:25

07.06.2018 12:19