javascript - 如何在 jquery 中为对象键创建一个工作变量以避免额外的代码

Question

我正在使用 TweenMax 脚本在滚动时向 div 添加样式。我想在不同的页面分辨率上有不同的样式。因此，我添加了一个 if 条件作为解决方案。我如何使用变量来避免在 if 条件中添加额外的代码？!我添加了 $direction 并且只添加了 direction 作为变量，但是，它似乎不起作用。

if (($(window).width() <= 900) && ($(window).width() >= 409)) {  
    var $direction = 'left';
} else {
    var $direction = 'top';
}
$(".softwares").children(".row").each(function(a) {
     $(this).delay(150 * a).fadeIn(0, function() {
         TweenMax.to($(this), .3, {
            $direction: 45 * a,
            opacity: 1,
            ease: Back.easeOut
         })
     })
});

我在 stackoverflow 中查看了很多问题，并使用 [] 找到了解决方案，但我无法使其工作。

我不希望代码像这样:(我想避免的额外代码)

$(".softwares").children(".row").each(function(a) {
     if (($(window).width() <= 900) && ($(window).width() >= 409)) {  
         // opacity: 1, ease: Back.easeOut are extra codes in both conditions
         var options = {left: 45 * a, opacity: 1, ease: Back.easeOut};
     } else {
         var options = {top: 45 * a, opacity: 1, ease: Back.easeOut};
     }
     $(this).delay(150 * a).fadeIn(0, function() {
         TweenMax.to($(this), .3, options) // use options object here
     })
});

Answer 1

你可以这样做:

$(".softwares").children(".row").each(function(a) {
     if (($(window).width() <= 900) && ($(window).width() >= 409)) {  
         // set options object directly in your condition
         var options = {left: 45 * a, opacity: 1, ease: Back.easeOut};
     } else {
         var options = {top: 45 * a, opacity: 1, ease: Back.easeOut};
     }
     $(this).delay(150 * a).fadeIn(0, function() {
         TweenMax.to($(this), .3, options) // use options object here
     })
});

但这会让您编写一些额外的代码。

否则，您可以查看 this question有关如何拥有动态 key 的更多信息。