jQuery - есть ли способ повторно использовать параметры, чтобы сократить дублирование кода? - PullRequest
Новая
       19

jQuery - есть ли способ повторно использовать параметры, чтобы сократить дублирование кода?

3 голосов
/ 23 сентября 2011

Допустим, у меня есть такой код: 

jQuery('#retouching-image-1').beforeAfter({
    animateIntro: true,
    introDelay: 500
});
jQuery('#retouching-image-2').beforeAfter({
    animateIntro: true,
    introDelay: 500
});

Вместо того, чтобы дублировать animateIntro: true, introDelay: 500 каждый раз, когда мне это нужно, возможно ли поместить эти значения в какую-то переменную многократного использования?

Спасибо.

Ответы [ 7 ]

3 голосов
/ 23 сентября 2011

Попробуйте следующее 

var x = {
    animateIntro: true,
    introDelay: 500
};

jQuery('#retouching-image-1').beforeAfter(x);
jQuery('#retouching-image-2').beforeAfter(x);

Другой, возможно, более подходящий вариант - использовать класс вместо идентификатора для обозначения этих элементов.Скажем, вы добавили класс `retouchImage 'к каждому из этих элементов.Тогда вы могли бы упростить свой код до следующего 

jQuery('.retouchImage').beforeAfter({
    animateIntro: true,
    introDelay: 500
});
2 голосов
/ 23 сентября 2011 
function dostuff(element) {
    element.beforeAfter({
        animateIntro: true,
        introDelay: 500
    });
}

jQuery(function() {
  dostuff(jQuery('#retouching-image-1,#retouching-image-2')); 
});

Создайте функцию или просто сделайте это вместо: 

jQuery('#retouching-image-1,#retouching-image-2').beforeAfter({
    animateIntro: true,
    introDelay: 500
});

Хотя лично я бы создал класс и сделал бы это следующим образом: 

jQuery('.retouching-images').beforeAfter({
    animateIntro: true,
    introDelay: 500
});
1 голос
/ 23 сентября 2011

Вы можете сделать: 

jQuery('#retouching-image-1, #retouching-image-2').beforeAfter({
    animateIntro: true,
    introDelay: 500
});

или, если у вас есть больше идентификаторов, вы можете использовать атрибут , начинающийся с селектора 

jQuery('img[id^=retouching-image-]').beforeAfter({
    animateIntro: true,
    introDelay: 500
});
1 голос
/ 23 сентября 2011

Вы можете сделать это в цикле, например, 

$.each(["#id1", "#id2"], function(_ id){
     $(id).beh();
});
1 голос
/ 23 сентября 2011

Попробуйте: 

options = {
    animateIntro: true,
    introDelay: 500
}

jQuery('#retouching-image-1').beforeAfter(options);
jQuery('#retouching-image-2').beforeAfter(options);

Еще лучше: 

jQuery('#retouching-image-1, #retouching-image-2').beforeAfter({
    animateIntro: true,
    introDelay: 500
});

, вероятно, также должно работать.

1 голос
/ 23 сентября 2011

Посмотрите внимательно на код - ответ там. Эти параметры на самом деле просто объект (обратите внимание на окружающие их фигурные скобки)! Это означает, что вы можете сделать следующее: 

var animationObj = {animateIntro: true, introDelay: 500};

jQuery('#retouching-image-1').beforeAfter(animationObj);
jQuery('#retouching-image-2').beforeAfter(animationObj);
0 голосов
/ 23 сентября 2011 
jQuery('#retouching-image-1,#retouching-image-2').beforeAfter({
    animateIntro: true,
    introDelay: 500
});

Это правильный синтаксис. Альтернативный способ: P

...