重構基本的JavaScript

我有以下代碼：重構基本的JavaScript

<script type="text/javascript"> 
$(function() { 
    //div1 toggle 
    function runEffect(){ 
     var options = {}; 
     //run the effect 
     $("#div1_toggle").toggle("blind",options,350); 
    }; 
    $("#div1").click(function() { 
     runEffect(); 
     return false; 
    }); 
}); 
</script>

想象一下上面的代碼複製字面上的編號命名DIV1，DIV2，DIV3的div等

這是窘況壞了，我想重寫代碼，使其適用於任意名稱的div以切換div（相同名稱+ _toggle）。

獎勵：我怎麼可能仍然允許其中一些div合併不同的切換速度（即上面指定的350ms），同時減少冗餘？

來源

2010-12-13 sscirrus

很多時候，簡化你的javascript最好通過首先簡化你的HTML來完成。

如果你沒有使用Div的ID（你不想自己增加ID號碼嗎？），而是使用類（類是通用的和可重複的）。如果「切換div」以某種方式與「被點擊的div」相關，例如，一個在另一個之後，這將工作得最好。我會做這樣的：

<div class="clickable"> 
</div> 
<div class="togglable"> 
</div> 
... rinse and repeat, as many times as you want...

然後你的腳本很簡單：

$(function() { 
    $(".clickable").click(function() { 
     $(this).next(".togglable").toggle("blind", {}, 350); 
    }); 
});

至於一些div以不同的速度切換？當然，只需添加另一個類：

<div class="clickable"> 
</div> 
<div class="fast togglable"> 
</div>

現在改變腳本：

$(function() { 
    $(".clickable").click(function() { 
     // A "normal" div 
     $(this).next(".togglable:not(.fast)").toggle("blind", {}, 350); 
     // A "fast" div 
     $(this).next(".togglable.fast").toggle("blind", {}, 100); // New value 
    }); 
});

還有其他的方法來做到這一點。您可以將「快速」類粘貼在「可點擊」div上，然後您將擁有兩個不同的點擊處理程序。你可以有一個「正常」和「快速」的班級，所以你不必做:not(.fast)，而只需做.normal。希望這給你一些想法...

來源

2010-12-13 02:20:15

你可以通過用逗號分隔的選擇

$（ '＃DIV1，＃DIV2，＃DIV3，.someClass'）

，然後檢查內部列表處理程序這個指的是什麼，並根據這個做些什麼。

你甚至可以選擇所有div

$（「格」）......雖然這不是一個好主意。

來源

2010-12-13 02:26:42

重構基本的JavaScript

回答

相關問題