Question

我不是程序员，只是想为自己组建一个小网站。:)

我正在尝试做什么：一个带有图像网格的“.container” - 每个都在一个相同的“.wrapper”里面，其中一些是不可点击的单图像包装，其中一些是可点击的1-4个图像的“堆叠” - 再次点击再一次看到.wrapper中的所有图像。

<div class="container">

<div class="wrapper">
<div class="content"><img src="1.png"></div>
<div class="content"><img src="2.png"></div>
<div class="content"><img src="3.png"></div>
<div class="content"><img src="4.png"></div>
</div>

<div class="wrapper">
<div class="content"><img src="5.png"></div>
</div>

<div class="wrapper">
<div class="content"><img src="6.png"></div>
<div class="content"><img src="7.png"></div>
</div>

</div>

到目前为止我做了什么：在这里找到（JQuery cycle through text on click）这段代码：

$(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：

<script type="text/javascript">
$(document).ready(function () {
    var divs = $('.content').hide(),
        i = 0;
    function cycle() {
        divs.fadeOut(0).delay(0).eq(i).fadeIn(0);
        i = ++i % divs.length;
    };
    cycle()
    $('.wrapper').click(function(){cycle()})
});
</script>

以及这个FIDDLE - 这个问题看起来与我的相似，可能吗？

问题和我需要的东西：上面jQuery代码的“适应”版本与1“.wrapper”一起使用。但是我的index.html中所有包装器的不同名称和每个包装的相同脚本的副本听起来像是一个灾难性的想法，也是我自己可以做到的唯一方法。：相信应该有优雅的调整/修复jQuery代码，使其适用于独立的“.wrapper”，仅适用于其中的图像，而不会干扰其他.wrappers及其图像。

这就是为什么我要求你的帮助，并感谢任何帮助，伙计们！

Answer 1

我相信以下内容会做你想要的（如果我理解正确的要求）。您基本上需要遍历每个包装器并将它们视为单个实例

＆＃13;

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

＆＃13;

.wrapper {
  border: 2px solid #ccc;
  margin: 10px;
  padding: 10px
}

.content {
  display: none
}

.content:first-child {
  display: block
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="wrapper">
    <div class="content">Wrap #1 Img #1</div>
    <div class="content">Wrap #1 Img #2</div>
    <div class="content">Wrap #1 Img #3</div>
    <div class="content">Wrap #1 Img #4</div>
  </div>

  <div class="wrapper">
    <div class="content">Wrap #2 Img #1</div>
  </div>

  <div class="wrapper">
    <div class="content">Wrap #3 Img #1</div>
    <div class="content">Wrap #3 Img #2</div>
  </div>

</div>

<button>Toggle content</button>

＆＃13;

jQuery on click循环浏览相同.wrappers中的图像

1 个答案: