Question

我有以下代码可以很好地隐藏和显示元素作为放置在父元素上的鼠标。问题是我知道如果我在代码中重复多次使用变量进行多次修改，它会更简洁，更清晰。我浏览了这个网站并谷歌寻求答案，虽然有类似问题的答案我没有找到一个适合我的。这是代码：

    $(document).ready(function(){

      $(".ultra").css("display","none");

      $(".ultras").on("mouseenter", function(){
        $(".ultra").animate({ opacity: 1.0 },400).slideToggle();
      });

      $(".ultras").on("mouseleave", function(){
        $(".ultra").animate({ opacity: 1.0 },400).slideToggle();
      });

       // new function
      $(".escon").css("display","none");
         $(".ultras2").on("mouseenter", function(){
            $(".escon").animate({ opacity: 1.0 },400).slideToggle();
         });

      $(".ultras2").on("mouseleave", function(){
          $(".escon").animate({ opacity: 1.0 },400).slideToggle();
      });                                   
    });

如你所见：

    .animate({ opacity: 1.0 },400).slideToggle();

在代码中反复重复。我不知道a）如何声明变量和b）如何使用它来替换它在代码中重复的实例。

Answer 1

尝试

function animate(val){
    $(val).animate({ opacity: 1.0 },400).slideToggle();
}

然后你可以做

animate(".escon")
animate(".ultra")

Answer 2

在这种情况下，您应该创建一个包含.animate({ opacity: 1.0 },400).slideToggle();的函数，然后将您动画的元素指定为变量以传递给函数。

例如：

var $ultra = $(".ultra");
var $escon = $(".escon");   

function slide(element) {
  element.animate({ opacity: 1.0 },400).slideToggle();
}

$(".ultras").on("mouseenter", function(){
  slide($ultra);
})

依此类推;这允许您保持代码DRY并尽可能多地重复使用动画！

Answer 3

您可以将jQuery选择器存储在这样的变量中：var $ultra = $(".ultra");

这样做有利于保存jQuery反复重复运行同一个选择器。

注意：在变量名之前使用$是一种提醒自己变量值是jQuery选择器的好方法。

然后您可以像$ultra.css(...);

一样使用它

对于动画，您可以执行以下操作：

function animate($element) {
    $element.animate({ opacity: 1.0 },400).slideToggle();
}

然后你可以使用像animate($ultra);

这样的功能

Answer 4

JavaScript中的变量（所有JS库都相同）都声明如下：

var varName = varValue;

每次致电

$(".ultra")

jQuery搜索整个DOM，构成一个“超级”类的元素集合，所以你可以通过这样做来大量优化你的代码：

var ultra = $(".ultra");
var ultras = $(".ultras");

  ultra.css("display","none");

  ultras.on("mouseenter", function(){
    ultra.animate({ opacity: 1.0 },400).slideToggle();
  });

  ultras.on("mouseleave", function(){
    ultra.animate({ opacity: 0 },400).slideToggle();
  });

但是在代码简洁方面，我会使用函数解决方案（在函数内部使用声明的变量来避免重新搜索DOM）

Answer 5

通过使用类，您可以减少行数并创建更简洁的代码，而无需函数或变量。

use warnings

$(document).ready(function(){
  $(".ultra").hide();
  $(".ultras").on("mouseenter mouseleave", function(){
    $(this).find(".ultra").stop(true,true).slideToggle();
  });                    
});

.ultra {
  width:50px;
  height:50px;
  float:left;
  border:1px solid black;
}

.ultras {
  border: 2px solid blue;
  padding:20px;
  margin:10px;
}

.escon {
  width:30px;
  height:30px;
}

.clearFloat {
  clear:both;
}

Answer 6

这是一个简单的例子，它使用变量和函数，并将一些初始样式（例如css('display','none')）移动到CSS，而不是将其保存在JS中。

可以做更多的优化，但这可以作为说明这一点的垫脚石：

$(document).ready(function() {
  var $ultra = $('.ultra'),
    $ultras  = $('.ultras'),
    $ultras2 = $('.ultras2'),
    $escon   = $('.escon');

  function slideToggle($el) {
    $el.animate({
      opacity: 1.0
    }, 400).slideToggle();
  }

  $ultras.on("mouseenter mouseleave", slideToggle.bind(null,$ultra));

  $ultras2.on("mouseenter mouseleave", slideToggle.bind(null,$escon));

});

.ultra,
.escon {
  display: none;
}

.ultras,
.ultras2 {
  border: 1px solid black;
  height: 1em;
  margin: 1em;
  padding: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ultras">
  <div class="ultra">ultra inside</div>
</div>
<div class="ultra">ultra outside</div>

<div class="ultras2">
  <div class="escon">escon inside</div>
</div>
<div class="escon">escon outside</div>

Answer 7

我最终做了这个优化但可能更好的事情;我从提供的一些示例和建议中获取了想法并且它有效：

$(document).ready(function(){
     function animate(val){
        $(val).animate({ opacity: 1.0 },200).slideToggle();
     }

     $(".ultra, escon").css("display","none");
     $(".ultras").on("mouseenter mouseleave", function(){
      animate(".ultra");
     });

     // ********* new function
       $(".ultras2").on("mouseenter mouseleave", function(){
         animate(".escon");
         animate(".vm");
       });

 });

如何在jQuery中使用变量

7 个答案: