如何在jQuery中使用變量

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); 
}) 

等等等等;這允許您保持代碼乾爽，並儘可能多地重複使用動畫！

Answer 3

可以在變量存儲jQuery選擇這樣的：var $ultra = $(".ultra");

這是很好的性能，以節省jQuery的反覆重新運行一遍又一遍相同的選擇。

注意：在變量名前面使用$是一種提醒自己變量的值是jQuery選擇器的好方法。

然後，您可以使用它像$ultra.css(...);

對於動畫，你可以做這樣的事情：

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

然後你可以使用該功能類似於JavaScript本animate($ultra);

Answer 4

變量（也一樣對於所有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

通過使用類，你可以減少行數，並創建更簡潔的c頌，沒有功能或變量。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="ultras" id="ultras1"> 
 
    <div class="ultra" id="ultra1">&nbsp;</div> 
 

 
    <div class="ultra" id="ultra2">&nbsp;</div> 
 
    <div class="clearFloat"></div> 
 
</div> 
 

 
<div class="ultras" id="ultras2"> 
 
    <div class="ultra" id="ultra3">&nbsp;</div> 
 

 
    <div class="ultra" id="ultra4">&nbsp;</div> 
 
    <div class="clearFloat"></div> 
 
</div>

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

});