JQuery по циклу кликов через изображения в одинаковых.wrappers независимо

Я не программист, просто пытаюсь собрать для себя небольшой сайт. :)

То, что я пытаюсь сделать: ".container" с сеткой изображений - каждый внутри идентичного ".wrapper", некоторые из них - не-кликабельные обертки одного изображения, некоторые из них являются "стеками" для кликов 1-4 изображения - нажмите снова и снова, чтобы просмотреть все изображения в этом.wrapper по одному.

То, что я сделал до сих пор: нашел здесь (цикл JQuery через текст при щелчке) этот фрагмент кода:

$(document).ready(function () {
 var divs = $('div[id^="content-"]').hide(),
 i = 0;

 function cycle() {
 divs.fadeOut(400).delay(400).eq(i).fadeIn(400);
 i = ++i % divs.length;
 };
 cycle()

 $('button').click(cycle); 
 // click button to show next paragraph
});

и "почти" "адаптировал" его для моих нужд: D:

а также этот FIDDLE - проблема похожа на мою, может быть?

Проблема и то, что мне нужно: "адаптированная" версия кода jQuery выше работает с 1 ".wrapper". Но разные имена для всех оберток и копия одного и того же сценария для каждого из них в моем index.html звучат как катастрофическая идея и единственный способ, которым я могу это сделать сам.: Думаю, должно быть элегантное исправление/исправление jQuery, который заставил бы его работать для КАЖДОГО ".wrapper" независимо и только для изображений внутри него, не мешая другим.wrappers и их изображениям.

Вот почему я прошу о помощи и буду признателен за любую помощь, ребята!

1 ответ

Я считаю, что следующее будет делать то, что вы хотите (если я правильно понимаю требования). Вам в основном нужно перебирать каждую оболочку и рассматривать их как отдельные экземпляры

$('button').on('click', function() {
 // isolate each wrapper
 $('.wrapper').each(function() {
 
 // get the content within this wrapper instance
 var $content = $(this).find('.content');
 
 // don't do anything if it is a single
 if ($content.length > 1) {
 
 // current is the only visible one
 var $curr = $content.filter(':visible');
 // if current is last one next will be first one in this group
 // otherwise will be the one right after it
 var $next = $curr.is($content.last()) ? $content.first() : $curr.next();

 // fade out current
 $curr.fadeOut(function() {
 // this function runs when fadeOut has completed
 // and can now fade in the next one
 $next.fadeIn()
 });
 }

 });
});
.wrapper {
 border: 2px solid #ccc;
 margin: 10px;
 padding: 10px
}

.content {
 display: none
}

.content:first-child {
 display: block
}
<div>

 <div>
 <div>Wrap #1 Img #1</div>
 <div>Wrap #1 Img #2</div>
 <div>Wrap #1 Img #3</div>
 <div>Wrap #1 Img #4</div>
 </div>

 <div>
 <div>Wrap #2 Img #1</div>
 </div>

 <div>
 <div>Wrap #3 Img #1</div>
 <div>Wrap #3 Img #2</div>
 </div>

</div>

<button>Toggle content</button>

licensed under cc by-sa 3.0 with attribution.