使 jquery 代码更短

Posted 2023-05-08

【中文标题】使 jquery 代码更短

【英文标题】：Make jquery code shorter

【发布时间】：2012-11-28 20:00:11

【问题描述】：

我知道我的代码可以像现在这样更短。但我只是不知道如何缩短它。我想这样做是因为它让一切变得更清晰。此外，这段代码使一切都变慢了。

html

   <div id="slider">
    <div id="slideLeft">
        <div class="slideText">
            <h1>Ik zoek werk</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Suspendisse iaculis magna sed lacus vestibulum venenatis. 
                Quisque sem turpis, semper vitae gravida sit amet, tristique ut ligula. 
            </p>
            <div class="slideButton">Bekijken</div>
        </div>
        <img src="../_/img/slidetest.png" />
    </div>
    <div id="slideRight">
        <div class="slideText">
            <h1>Ik zoek personeel</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Suspendisse iaculis magna sed lacus vestibulum venenatis.
                Quisque sem turpis, semper vitae gravida sit amet, tristique ut ligula. 
            </p>
            <div class="slideButton">Bekijken</div>         
        </div>
        <img class="slideImgSolid" src="../_/img/slidetest3.png" />
    </div>
</div>

css

#sliderwidth:100%;min-height:450px;background-color:#999;
#slideLeftwidth:50%;position:absolute;left:0;background-color:#333;height:450px;overflow:hidden;
#slideRightwidth:50%;position:absolute;right:0;height:450px;background-color:#666;overflow:hidden;

.slideTextposition:absolute;top:50%;overflow:hidden;width:400px;z-index:100;
#slideLeft .slideTextright:0;
#slideRight .slideTextleft:-150px;

#slider h1position:relative;font-size:18px;background-color:white;padding:5px 15px 5px 15px;
#slideRight .slideText h1text-align:right;left:0px;
#slideLeft .slideText h1text-align:left;right:-150px;
#slider pposition:relative;width:300px;right:-400px;margin:20px 0 0 0;
.slideButtonposition:relative;right:0;right:-400px;margin:10px 0 0 0;background-color:#888;width:70px;padding:5px;text-align:center;
.slideImgSolidposition:absolute;top:0;right:0;

js

$('#slideLeft').mouseenter(function()
    $("#slideRight").animate(
       width: '30.1%',
       easing: 'easInOutCubic'                 
    ,  duration: 200, queue: false );
    $("#slideLeft p").animate(
       right: '0px',
       easing: 'easInOutCubic'
    ,  duration: 100, queue: false );
    $("#slideLeft h1").animate(
       right: '0px',
       easing: 'easInOutCubic'
    ,  duration: 200, queue: false );
    $("#slideLeft .slideButton").animate(
       right: '0px',
       easing: 'easInOutCubic'
    ,  duration: 200, queue: false );
    $("#slideLeft").animate(
       width: '70%',
       easing: 'easInOutCubic',
    ,  duration: 200, queue: false );
    );

$('#slideLeft').mouseleave(function()
    $("#slideRight").animate(
       width: '50%',
       easing: 'easInOutCubic'
    ,  duration: 200, queue: false );
    $("#slideLeft h1").animate(
       right: '-150px',
       easing: 'easInOutCubic'
    ,  duration: 200, queue: false );
    $("#slideLeft p").animate(
       right: '-400px',
       easing: 'easInOutCubic'
    ,  duration: 200, queue: false );
    $("#slideLeft .slideButton").animate(
       right: '-400px',
       easing: 'easInOutCubic'
    ,  duration: 100, queue: false );
    $("#slideLeft").animate(
       width: '50%',
       easing: 'easInOutCubic'
    ,  duration: 200, queue: false );
);

【问题讨论】：

你知道你可以在选择器中放逗号吗？

不，我没有。这会有所帮助

我不一定同意这段代码可以更短。正如dystroy 所建议的那样，您可以将#slideLeft h1 和#slideLeft .slideButton 放入一个函数调用中，但除此之外，您的动画对象需要不同的单独值，所以我看不出您可以做些什么来使代码更小或更快。不过我可能错了。

@Grüse 你是对的，这不会使代码更短。这只是一个评论，而不是一个答案。我在下面提出一个答案。

@dystroy 我知道，我只是在参考您的有用评论。我不是要攻击你所说的话，如果听起来那样，对不起。为您的回答 +1，我喜欢它。

【参考方案1】：

我看到的最干净的解决方案是定义对象：

var objects = [
  selector: "#slideLeft p", enterright: '0px', leaveright: '-400px', duration: 200,
   ...
];

然后使用

   $('#slideLeft').mouseenter(function()
       $.each(objects, function()
           $(this.selector).animate(
               right: this.enterright,
               easing: 'easInOutCubic'
           ,  duration: this.duration, queue: false );
       );
   ).mouseleave(function()
       $.each(objects, function()
           $(this.selector).animate(
               right: this.leaveright,
               easing: 'easInOutCubic'
           ,  duration: this.duration, queue: false );
       );
   );

这将很容易扩展和管理，因为所有重要参数都在 objects 数组声明中。

如果您确定您的对象不会改变，您可能希望将对象声明中的选择器替换为生成的 jQuery 对象以获得更高效的代码：

var objects = [
  $obj: $("#slideLeft p"), enterright: '0px', leaveright: '-400px', duration: 200,
  ...