Question

我使用jQuery循环插件构建了一个轮播。我有4个链接跳转到相关幻灯片。现在我每个链接都有一大堆代码。我正在尝试创建一个单一的多用途功能。

   $('#features-slide0').click(function() {  
       $('#features-slides').cycle(0);  
       return false;  
   });

   $('#features-slide1').click(function() {  
       $('#features-slides').cycle(1);  
       return false;  
   });

   $('#features-slide2').click(function() {  
       $('#features-slides').cycle(2);  
       return false;  
   });

   $('#features-slide3').click(function() {  
       $('#features-slides').cycle(3);  
       return false;  
   });

我在每个链接上都有一个rel值，其中包含幻灯片的编号。如何使用它来创建一个负责链接跳转的单个代码块？

<a id="features-slide0" href="" rel="0">Lorum ipsum dolor sit amet lorum ipsum dolor sit amet.</a>
<a id="features-slide1" href="" rel="1">Lorum ipsum dolor sit amet lorum ipsum dolor sit amet.</a>
<a id="features-slide2" href="" rel="2">Lorum ipsum dolor sit amet lorum ipsum dolor sit amet.</a>
<a id="features-slide3" href="" rel="3">Lorum ipsum dolor sit amet lorum ipsum dolor sit amet.</a>

Answer 1

jQuery.index()可用于获取元素的索引而不是父元素。

$('a[id^=features-slide]').click(function() {  
    $('#features-slides').cycle($(this).index());  
    return false;  
});

Answer 2

猜测你的HTML：

// assumes you have links within a features div
$('#features a').click(function() {  
    $('#features-slides').cycle( // call `cycle` with the rel# of clicked item
      parseInt(                  // turn the attribute value into a number
          $(this).attr('rel')    // retrieve the attribute value for clicked item
      )
    );
    return false;  // don't follow the link
});

parseInt()是一个内置的JS函数。它只是将一个字符串变成一个数字。

Answer 3

for (var i = 4; i--;) {
  $('#features-slide'+i).click(function() {  
    $('#features-slides').cycle(i);  
    return false;  
  });
}

Answer 4

抽象。使用常量创建一个方法并传入变量。因此具有类似的功能......

function cycleFunction(num)
{
 $('#features-slide'+num).cycle(num);
 return false;  
}

然后你可以从任何点击事件中调用它

$('#features-slide1').click(function() {  
       return $('#features-slide1').cycleFunction(1);  
   });

这样您就可以只在一个地方更改功能，并为所有调用它更改功能。 Aaaand你可以添加更多'功能 - 幻灯片使用它。你仍然需要重复代码将它附加到点击事件，但我认为明确这个任务是好的，这样你可以更容易阅读你想要做的事情：）

帮助我减少简单的jQuery函数中的代码重复

4 个答案: