改進這個jQuery？

想知道是否有人可以幫助我改進我的代碼。它只是一些基本的複選框選擇，但我知道必須有一些簡短的做事方式。改進這個jQuery？

jQuery的：

$(document).ready(function() { 
       $(".sendType").click(function() { 
        var what_is = $(this).attr("name"); 
        var p = new RegExp('.*?(\\d+).*?((?:[a-z][a-z]+))',["i"]); 
        var m = p.exec(what_is); 
        if (m != null) { 
         check_all(m[1], m[2], (this).checked); 
        } 
       }); 
       $(".controlType").click(function() { 
        var what_is = $(this).attr("name"); 
        check_all(0, what_is, (this).checked); 
       }); 
       function check_all(id, what, check) { 
        all = $("input:checkbox"); 
        sa = $("input:checkbox.sendType."+id); 
        sac = $("input:checkbox:checked.sendType."+id).length; 
        sw = $("input:checkbox.sendType."+what); 
        if (id == 0) { 
         if (what == 'all') { 
          all.attr('checked', check); 
         } else { 
          sw.attr('checked', check); 
         } 
        } 
        if (what == 'all') { 
         sa.attr('checked', check); 
        } else { 
         if (sac == 2) { 
          if (check === true) { 
           sa.attr('checked', true); 
          } else { 
           $("input:checkbox.sendType.all."+id).attr('checked', false); 
          } 
         } 
        } 
        ce = $("input:checkbox.controlType.email"); 
        ct = $("input:checkbox.controlType.text"); 
        s2 = $("input:checkbox:not(:checked).sendType.email").length; 
        s3 = $("input:checkbox:not(:checked).sendType.text").length; 
        if (!s2) { 
         ce.attr('checked', true); 
        } else { 
         ce.attr('checked', false); 
        } 
        if (!s3) { 
         ct.attr('checked', true); 
        } else { 
         ct.attr('checked', false); 
        } 
        if (!s3 && !s2) { 
         all.attr('checked', true); 
        } else { 
         $("input:checkbox.controlType.all").attr('checked', false); 
        } 
       } 
      });

的標記：

<ul class="form-section"> 
    <li class="form-line"> 
    <input type="checkbox" class="controlType all" name="all" value="1"> 
     <input type="checkbox" class="controlType email" name="email" value="1"> 
     <input type="checkbox" class="controlType text" name="text" value="1"> 
    </li> 
    <li class="form-line"> 
    <input type="checkbox" class="sendType all 1" name="id[1][all]" value="Charlie Gery allen"> 
     <input type="checkbox" class="sendType email 1" name="id[1][email]" value="[email protected]"> 
     <input type="checkbox" class="sendType text 1" name="id[1][text]" value="0412345678"> 
     <span id="id[1][name]">Charlie Gery allen</span> 
    </li> 
    <li class="form-line"> 
    <input type="checkbox" class="sendType all 6" name="id[6][all]" value="ye ere ertert"> 
     <input type="checkbox" class="sendType email 6" name="id[6][email]" value="[email protected]"> 
     <input type="checkbox" class="sendType text 6" name="id[6][text]" value="0415698721"> 
     <span id="id[6][name]">ye ere ertert</span> 
    </li> 
    <li class="form-line"> 
    <input type="checkbox" class="sendType all 7" name="id[7][all]" value="erterert utrtuuy 67678"> 
     <input type="checkbox" class="sendType email 7" name="id[7][email]" value="[email protected]"> 
     <input type="checkbox" class="sendType text 7" name="id[7][text]" value="0598746248"> 
     <span id="id[7][name]">erterert utrtuuy 67678</span> 
    </li> 
    <li class="form-line"> 
    <input type="checkbox" class="sendType all 8" name="id[8][all]" value="rrrrrrtyertertrrrrrr yyyyyyyetryeyyyyyyy"> 
     <input type="checkbox" class="sendType email 8" name="id[8][email]" value=""> 
     <input type="checkbox" class="sendType text 8" name="id[8][text]" value=""> 
     <span id="id[8][name]">rrrrrrtyertertrrrrrr yyyyyyyetryeyyyyyyy</span> 
    </li> 
    <li class="form-line" id="id_2"> 
    <button id="input_2" type="submit" class="form-submit-button">Send Message</button> 
    </li> 
</ul>

如果任何人都可以得到它，感謝堆。

乾杯查理

來源

2011-02-11 Charlie Sheather

如果您使用更多的描述性變量名稱，生活會更加甜美。當你盯着sa，ct，ce，s2，s3等海洋時，很難建立一個程序流程的心理模型。爲什麼要成爲一個人類代碼縮減器？ – 2011-02-11 05:44:36

我已經採取了優化的兩個JS代碼和HTML的自由。（在某種程度上）

看看這裏：http://jsfiddle.net/dominicbarnes/ybGbU/

HTML

你會發現，我已經刪除了一些類（以下簡稱「ID」類，controlType和sendType明顯）和還添加了一些ID（contact和control-line）。

<ul id="contact" class="form-section"> 
    <li>All Email Text</li> 
    <li id="control-line" class="form-line"> 
     <input type="checkbox" class="all" name="all" value="1"> 
     <input type="checkbox" class="email" name="email" value="1"> 
     <input type="checkbox" class="text" name="text" value="1"> 
    </li> 
    <li class="form-line"> 
     <input type="checkbox" class="all" name="id[1][all]" value="Charlie Gery allen"> 
     <input type="checkbox" class="email" name="id[1][email]" value="[email protected]"> 
     <input type="checkbox" class="text" name="id[1][text]" value="0412345678"> 
     <span id="id[1][name]">Charlie Gery allen</span> 
    </li> 
    <li class="form-line"> 
     <input type="checkbox" class="all" name="id[6][all]" value="ye ere ertert"> 
     <input type="checkbox" class="email" name="id[6][email]" value="[email protected]"> 
     <input type="checkbox" class="text" name="id[6][text]" value="0415698721"> 
     <span id="id[6][name]">ye ere ertert</span> 
    </li> 
    <li class="form-line"> 
     <input type="checkbox" class="all" name="id[7][all]" value="erterert utrtuuy 67678"> 
     <input type="checkbox" class="email" name="id[7][email]" value="[email protected]"> 
     <input type="checkbox" class="text" name="id[7][text]" value="0598746248"> 
     <span id="id[7][name]">erterert utrtuuy 67678</span> 
    </li> 
    <li class="form-line"> 
     <input type="checkbox" class="all" name="id[8][all]" value="rrrrrrtyertertrrrrrr yyyyyyyetryeyyyyyyy"> 
     <input type="checkbox" class="email" name="id[8][email]" value=""> 
     <input type="checkbox" class="text" name="id[8][text]" value=""> 
     <span id="id[8][name]">rrrrrrtyertertrrrrrr yyyyyyyetryeyyyyyyy</span> 
    </li> 
    <li class="form-line" id="id_2"> 
     <button id="input_2" type="submit" class="form-submit-button">Send Message</button> 
    </li> 
</ul>

的JavaScript

我在這裏完全重寫這一部分，包括評論！

$(document).ready(function() { 
    // get and store a list of all the "non-control" checkboxes 
    // ie, look in #contact for any checkbox not within #control-line 
    var $checkboxes = $("#contact").find("li.form-line:not(#control-line) input:checkbox"); 

    // now we'll enable the "control" checkboxes 
    $("#control-line input:checkbox").change(function() { 
     // if the selected control box has the "all" class 
     if ($(this).hasClass("all")) { 
      // then set all the "non-control" checkboxes to the same state as this one 
      $checkboxes.attr("checked", this.checked); 
      // as well as the sibling checkboxes (email and text) 
      $(this).siblings("input:checkbox").attr("checked", this.checked); 
     } else { 
      // otherwise, we only want to select a specific column, so we take the current className 
      // (this will break if you add any classes here, you could use a data-* attribute instead 
      $checkboxes.filter("." + this.className).attr("checked", this.checked); 
     } 
    }); 

    // now let's attach a specific event to the "all" checkboxes 
    // we'll start with our cached collection from above, then filter it to find only `.all` 
    $checkboxes.filter(".all").change(function() { 
     // set all the checkbox siblings to the state of the current checkbox 
     $(this).siblings("input:checkbox").attr("checked", this.checked); 
    }); 
});

來源

2011-02-11 06:19:47

改進這個jQuery？

回答

相關問題