重构基本的javascript

Question

我有以下代码:

<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中的某些div加入不同的切换速度(即上面指定的350ms),同时减少冗余？

Answer 1

很多时候,简化您的JavaScript最好先通过简化HTML来完成.

最好不要为Div使用ID(你不想自己不断增加ID号吗？)而是使用类(类是通用的和可重复的).如果"toggle div"以某种方式与"clicked 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.希望这会给你一些想法......