如何在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 了解有关如何使用动态键的更多信息。