Question

我在我正在处理的单个页面上使用多个jquery循环滑块，并且每个滑块使用相同的代码，只有id正在递增。我知道有一种方法可以用更简单的代码来做到这一点。我已经尝试了.each()但它不起作用所以有任何想法吗？

$('#rest-1 .rest-slider').cycle({
    fx: 'fade',
    timeout: 0,
    speed: 750,
    slideExpr: 'img',
    next: '#rest-1 .slider-next',
    prev: '#rest-1 .slider-prev'
});

$('#rest-2 .rest-slider').cycle({
    fx: 'fade',
    timeout: 0,
    speed: 750,
    slideExpr: 'img',
    next: '#rest-2 .slider-next',
    prev: '#rest-2.slider-prev'
});

$('#rest-3 .rest-slider').cycle({
    fx: 'fade',
    timeout: 0,
    speed: 750,
    slideExpr: 'img',
    next: '#rest-3 .slider-next',
    prev: '#rest-3 .slider-prev'
});

Answer 1

与大多数重复代码的问题一样，您可以将未更改的部分封装到函数中。在这种情况下，最简单的解决方案是返回一个对象并将next和prev值作为参数的函数。

function createCycleArg(nextVal, prevVal) {
    return {
        fx: 'fade',
        timeout: 0,
        speed: 750,
        slideExpr: 'img',
        next: nextVal,
        prev: prevVal
    };
}

然后......

$('#rest-1 .rest-slider').cycle(createCycleArg(
    '#rest-1 .slider-next', 
    '#rest-1 .slider-prev'));

$('#rest-2 .rest-slider').cycle(createCycleArg(
    '#rest-2 .slider-next', 
    '#rest-2 .slider-prev'));

$('#rest-3 .rest-slider').cycle(createCycleArg(
    '#rest-3 .slider-next', 
    '#rest-3 .slider-prev'));

你可以进一步打破这一点，只需输入一个数字，因为那是真正唯一改变的。

function createCycleArg(idNum) {
    return {
        fx: 'fade',
        timeout: 0,
        speed: 750,
        slideExpr: 'img',
        next: '#rest-' + idNum + ' .slider-next',
        prev: '#rest-' + idNum + ' .slider-prev'
    };
}

如果有一些jquery特定的方法可以更好地做到这一点我不会知道它，但一般来说，将重复的部分扔到一个函数中。

Answer 2

$.each([1,2,3,4,5],function(i,v){
    $('#rest-'+v+' .rest-slider').cycle({
        fx: 'fade',
        timeout: 0,
        speed: 750,
        slideExpr: 'img',
        next: '#rest-'+v+' .slider-next',
        prev: '#rest-'+v+' .slider-prev'
    });
})

Answer 3

我想到了三种方法：1。创建一个以ID作为参数的函数，2。在数组中定义ID并循环遍历数组，或者3.使用循环将循环计数器连接到ID字符串。

所以，当我打字的时候，我看到另一个答案弹出选项1 - 见Ed S.的回答。

选项2，提前定义ID列表（适用于任何格式的ID，而不仅仅是编号的ID）：

var sliderIDs = ['#rest-1', '#rest-2', '#rest-3'];

$.each(sliderIDs, function(i,val) {
   $(val + ' .rest-slider').cycle({
      fx: 'fade',
      timeout: 0,
      speed: 750,
      slideExpr: 'img',
      next: val + ' .slider-next',
      prev: val + ' .slider-prev'
   }); 
});

选项3，老派循环计数器连接：

for (var i=1; i <= 3; i++) {
   var id = '#rest-' + i;
   $(id + ' .rest-slider').cycle({
      fx: 'fade',
      timeout: 0,
      speed: 750,
      slideExpr: 'img',
      next: id + ' .slider-next',
      prev: id + ' .slider-prev'
   }); 
});

Answer 4

只需使用常规选择器和.each()。

$('[id|="rest"] .rest-slider').each(function( i ) {
    $(this).cycle({
        fx: 'fade',
        timeout: 0,
        speed: 750,
        slideExpr: 'img',
        next: '#rest-' + (i+1) + ' .slider-next',
        prev: '#rest-' + (i+1) + ' .slider-prev'
    });
});

您应该在[id|="rest"]之前添加正确的标记名称。

Answer 5

未经测试，但这应该有效（假设ID是滑块的父级）

$('.rest-slider').each(function(){
    var id = '#' + $(this).parent().attr('id');
    $(id + ' .rest-slider').cycle({
        fx: 'fade',
        timeout: 0,
        speed: 750,
        slideExpr: 'img',
        next: id + ' .slider-next',
        prev: id + ' .slider-prev'
    });
});

有没有办法简化这个jQuery代码或将其转换为循环或其他东西？

5 个答案: