有没有办法简化这段jQuery代码，或者把它转换成循环之类的东西？

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

未经测试，但这应该可以工作(假设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'
    });
});

Answer 2

与大多数重复代码的问题一样，您可以将不会更改的部分封装为一个函数。在这种情况下，最简单的解决方案是一个函数，它返回一个对象，并将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 3

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