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

Javascript 帮助我减少简单jQuery函数中的代码重复,javascript,jquery,Javascript,Jquery,我使用jQuery循环插件构建了一个旋转木马。我有4个链接可以跳转到相关幻灯片。现在每个链接都有一段代码。我试图创建一个单一的多用途函数 $('#features-slide0').click(function() { $('#features-slides').cycle(0); return false; }); $('#features-slide1').click(function() { $('#featur

我使用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>

可用于获取元素的索引,而不是父元素的索引

$('a[id^=features-slide]').click(function() {  
    $('#features-slides').cycle($(this).index());  
    return false;  
});
猜测您的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
});

是一个内置的JS函数。它只是把一个字符串变成一个数字。

抽象。使用常量创建一个方法,并传入变量。所以有一个类似这样的函数

function cycleFunction(num)
{
 $('#features-slide'+num).cycle(num);
 return false;  
}
然后,您可以从任何单击事件调用它

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

通过这种方式,您可以只在一个位置更改函数,并且它可以为所有调用它的对象更改函数。aa您还可以添加更多使用它的“功能”幻灯片。您仍然需要重复代码才能将其附加到click events,但我认为最好将此赋值显式,以便更易于阅读您正在尝试执行的操作:)

非常感谢。这很有效。你能解释一下parseInt部分吗,我以前没见过它。parseInt()是一个内置函数,可以将字符串转换为int;为您添加了精彩的评论。我理解我现在遇到的问题。非常感谢您以及提供输入的所有其他人。
i
在所有单击处理程序中都将是4,因为JavaScript通过引用.Friggin的匿名函数关闭变量。基于新的HTML修复。谢谢:)
$('#features-slide1').click(function() {  
       return $('#features-slide1').cycleFunction(1);  
   });