jQuery - 有没有办法重新使用参数来减少代码重复？

Question

比方说，我有一些像这样的代码：每次我需要它

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

而不是重复animateIntro: true, introDelay: 500，是有可能把这些值转换成某种形式的可重复使用的变量？

谢谢。

Answer 1

请尝试以下

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

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

另外，可能更多的可重复使用的选项是使用一类，而不是一个id的标记这些元素。假设你为这些项目中的每一个添加了“retouchImage”类。然后，你可以简化你的代码下面

jQuery('.retouchImage').beforeAfter({ 
    animateIntro: true, 
    introDelay: 500 
}); 

Answer 2

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

这是正确的语法。 备选方法：P

Answer 3

仔细查看代码 - 答案就在那里。这些参数实际上只是一个对象（注意围绕它们的花括号）！这意味着你可以做到以下几点：

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

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

Answer 4

试试这个：

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 
}); 

或许应该正常工作。

Answer 5

你可以做到这一点在像这样一个循环，

$.each(["#id1", "#id2"], function(_ id){ 
    $(id).beh(); 
}); 

Answer 6

你可以这样做：

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

，或者如果你有多个标识，您可以使用attribute starts with selector

jQuery('img[id^=retouching-image-]').beforeAfter({ 
    animateIntro: true, 
    introDelay: 500 
}); 

Answer 7

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 
});