Есть ли способ упростить этот код JQuery или преобразовать его в цикл или что-то? - PullRequest
Новая
       2

Есть ли способ упростить этот код JQuery или преобразовать его в цикл или что-то?

0 голосов
/ 29 ноября 2011

Я использую несколько ползунков цикла jquery на одной странице, над которой я работаю, и использую один и тот же код для каждого из ползунков, только увеличивается идентификатор.я знаю, что есть способ сделать это с помощью гораздо более простого кода.Я пробовал .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'
});

Ответы [ 5 ]

0 голосов
/ 29 ноября 2011

Просто используйте общий селектор вместе с .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"].

0 голосов
/ 29 ноября 2011

На ум приходят три способа: 1. Создать функцию, которая принимает идентификатор в качестве параметра, 2. Определить идентификаторы в массиве и пройти по массиву, или 3. Использовать цикл, чтобы объединить счетчик циклов в идентификатор. строка.

Итак, когда я печатал, я увидел еще один ответ с вариантом 1 - см. Ответ Эда С.

Вариант 2, заранее определяющий список идентификаторов (который будет хорошо работать для идентификаторов в любом формате, а не только с нумерацией): 

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'
   }); 
});
0 голосов
/ 29 ноября 2011

Не проверено, но это должно работать (при условии, что идентификаторы являются родительскими для ползунка) 

$('.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'
    });
});
0 голосов
/ 29 ноября 2011 
$.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'
    });
})
0 голосов
/ 29 ноября 2011

Как и в случае большинства проблем с дублированным кодом, вы можете инкапсулировать части, которые не превращаются в функцию. В этом случае самым простым решением будет функция, которая возвращает объект и принимает значения 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-способ сделать это лучше, я бы об этом не знал, но в общем случае бросаем дублированные части в функцию.

...