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

how to make a working variable for object key in jquery to avoid extra codes

本文关键字：变量 工作 一个 代码 中为 jquery object 创建      更新时间：2023-09-26

我使用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
     })
});

您可以这样做：

$(".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
     })
});

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

否则，您可以查看此问题以了解有关如何使用动态键的更多信息。

相关文章：