Question

我的js中有这个：

$(function(){
    $('.slide:nth-child(11) .layout-100:first-child').click(function(){
        $('.slide:nth-child(11) .layout-100:first-child').fadeOut('slow');
        $('.slide:nth-child(11) .layout-100:nth-child(2)').fadeIn('slow');
    });
});

$(function(){
    $('.slide:nth-child(11) .layout-100:nth-child(2)').click(function(){
        $('.slide:nth-child(11) .layout-100:nth-child(2)').fadeOut('slow');
        $('.slide:nth-child(11) .layout-100:nth-child(3)').fadeIn('slow');
    });
});

......等等。

我有多张图片，我希望能够通过点击功能进行切换。但是我现在写下来的是很多代码。有没有办法把它变成一个函数？

Answer 1

您可以获取可见图像的索引并将其作为参数传递给该函数。比你可以轻松计算哪些图像应该淡入和淡出。

你能用一些有用的东西做个小提琴吗？我可以编辑小提琴并告诉你它是如何工作的。

Answer 2

你可以试一试，但是没有看到你的html结构，我无法测试它。

jQuery(function($){
  $('.slide:nth-child(11) .layout-100').each(function() {
    $(this).click(function() {
      $(this).fadeOut('slow');
      if ($(this).next().length)
        $(this).next().fadeIn('slow');
      else
        $(this).parent().children().first().fadeIn('slow');
    });
  });
});

在多个图像之间切换

2 个答案: