Javascript，我可以將其更改爲循環嗎？

我正在製作一個導航欄並讓它工作。我想改變我的寫作。有重複的代碼看起來像這樣：Javascript，我可以將其更改爲循環嗎？

$("nav span").mouseover(function(){ 
var currentColor = $("#" +$(this).attr("data-loc")).css("backgroundColor"); 
var currentPos = $(this).position().left; 

if ($(this).attr("data-loc") === "home"){ 
    $("#hoverstyle").animate({"left":currentPos},150); 
    $("#hoverstyle").css("backgroundColor",currentColor); 
    $("#hoverstyle").css({width:$(this).width()}); 

} 
else if($(this).attr("data-loc") === "writer"){ 
    $("#hoverstyle").animate({"left":currentPos},150); 
    $("#hoverstyle").css("backgroundColor",currentColor); 
    $("#hoverstyle").css({width:$(this).width()}); 
} 
else if($(this).attr("data-loc") === "historian"){ 
    $("#hoverstyle").animate({"left":currentPos},150); 
    $("#hoverstyle").css("backgroundColor",currentColor); 
    $("#hoverstyle").css({width:$(this).width()}); 

} 
else if($(this).attr("data-loc") === "teacher"){ 
    $("#hoverstyle").animate({"left":currentPos},150); 
    $("#hoverstyle").css("backgroundColor",currentColor); 
    $("#hoverstyle").css({width:$(this).width()}); 

} 
else if($(this).attr("data-loc") === "fencing"){ 
    $("#hoverstyle").animate({"left":currentPos},150); 
    $("#hoverstyle").css("backgroundColor",currentColor); 
    $("#hoverstyle").css({width:$(this).width()}); 

} 
});

但我無法弄清楚如何使它更好，我想爲使其成爲一個循環，但我不能弄明白-.-。。請幫忙！

來源

2014-01-09 user3046507

爲什麼不使用'switch'？ – Cilan

爲什麼你使用'if' /'else if'？在任何情況下你都會做同樣的事情。 –

爲什麼你添加了，如果你沒有做任何獨立的事情 –

我會創建一個有效的loc值的數組，然後看看該元素是否在該數組中有一個值。如果它是在陣列中發現

var locs = ['home', 'writer', 'historian', 'teacher', 'fencing']; 

var thisLoc = $(this).attr('data-loc'); 
if (locs.indexOf(thisLoc) > -1) { 
    //do stuff 
}

Array的indexOf方法返回的項的索引。否則它返回-1。所以，如果你更多的是-1你知道data-loc值是在你的數組中，你可以採取行動。

您還可以清理你的jQuery操作通過重用$('#hoverstyle')對象，這就是所謂的鏈接。 jQuery的方法通常會返回jQuery對象，以便您可以在不再次查找對象的情況下鏈接調用。您可以將您的css()調用與一個調用傳遞給具有兩個屬性的對象。

$("#hoverstyle") 
    .animate({"left":currentPos},150) 
    .css({ 
     backgroundColor: currentColor, 
     width:$(this).width() 
    });

來源

2014-01-09 23:24:07

** + 1 **非常好的主意，並在你的下一個編輯你實際*解釋*爲什麼它的作品 – Cilan

請注意'Array.prototype IE <= 8不支持.indexOf'。 –

如果您需要支持IE <= 8，請填寫它：https：//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#Polyfill –

Switch switch？

switch ($(this).attr("data-loc")) 
{ 
    case "home": 
    case "writer": 
    case "historian": 
    case "teacher": 
    case "fencing": 
     $("#hoverstyle").animate({"left":currentPos},150); 
     $("#hoverstyle").css("backgroundColor",currentColor); 
     $("#hoverstyle").css({width:$(this).width()}); 
     break; 
    default: 
     break; 
}

來源

2014-01-09 23:23:51 Yoann

你不需要三次選擇相同的元素，爲什麼你不鏈接這些方法？ –

** + 1 **我發表評論作爲回答有問題，我總是害怕它是不正確的：P – Cilan

相同，但我無法評論所有的時間，沒有足夠的聲望，所以我回答：/ – Yoann

Javascript，我可以將其更改爲循環嗎？

回答

相關問題