有没有办法简化这个jQuery代码或者把它转换成一个循环之类的

Is there any way to simplify this jQuery code or convert it into a loop or something?

本文关键字：一个 循环 转换 jQuery 有没有 或者 代码      更新时间：2023-09-26

我在一个页面上使用多个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'
});

与大多数重复代码问题一样，您可以将不需要更改的部分封装到函数中。在这种情况下，最简单的解决方案是一个函数返回一个对象，并将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特定的方法来做得更好，我不知道，但一般来说，把重复的部分扔到一个函数中。

我想到了三种方法:创建一个以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'
   }); 
});

只需使用通用选择器，以及.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"]之前放置正确的标签名称。

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

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