jQuery和變量和函數的使用

Question

我正在處理表單標記中的jquery估計程序。當我完成這將是一個相當大的腳本。在許多任務上，我在一個組中有大約50個複選框，當它被選中時，它會向前推進一個UI滑塊。如果我取消選中該框，則將滑塊移回一個。

這些框全部隱藏，直到我點擊一個單選按鈕，同時取消隱藏複選框，將讀取多少個複選框，然後將該數字返回到滑塊。

我有一個功能，它也可以在每次選中或取消選中框時調整總估計價格。

感覺這是一種形式......我有一個contact.php文件，它將從表格​​中提取所有信息並通過電子郵件發送給網站所有者。

現在最大的問題就是.......我有50個檢查框...

的HTML

<input type="checkbox" id="R_C-helpPage01" name="helpPage01" value="helpPage01" class="R_C R_C-width20" /> 
    <label id="R_C-helpPage01" class="W_E"></label> 

    <input type="checkbox" id="R_C-helpPage02" name="R_C-helpPage02" value="helpPage02" class="R_C R_C-width20" /> 
    <label id="R_C-helpPage02" class="R_C"></label> 

    <input type="checkbox" id="R_C-helpPage03" name="R_C-helpPage03" value="helpPage03" class="R_C R_C-width20" /> 
    <label id="R_C-helpPage03" class="R_C"></label> 

樣品的一些變種的樣本

var helpPage01 = 'Home Page'; 
var helpPage02 = 'About Us'; 
var helpPage03 = 'Our Services'; 
var helpPage04 = 'Contact Us'; 

聽到的主要功能我不知道如何使所有這些檢查按鈕只需使用這個函數必須爲每個複選框設置50個副本。

我的第一個猜測是這樣的下面

$('#And 47 more ID's, #helpPage03, #helpPage02, #helpPage01').click(function() 
                   and bla bla bla 

功能是現在..

  $helpPage.click(function() { 
    if ($pages.val() == 20) { 
    alert('Please call for a bulk estimate: ' + phoneNumber); 
      return false; 
      } 

if ($helpPage.is(':checked')) 
      { 
    var s = $pageSlider, 
      val = s.slider("value"), 
      step = s.slider("option", "step"); 
      s.slider("value", val + step); 
      $pages.val(("value", val + step)); 
      $amount.val([("value", val + step) * pageAmount]/[$daySlider.slider("value")]); 
      $slideCalc.click(); 
      } 

else { 
      var s = $pageSlider, 
      val = s.slider("value"),     
      step = s.slider("option", "step");     
      s.slider("value", val - step);   
      $pages.val(("value", val - step));   
      $amount.val([[("value", val - step) * pageAmount]/$daySlider.slider("value")]]); 
      $slideCalc.click(); 
      }     
    }); 

更

$('#R_C-helpPage01').html(helpPage01 + '<br />'); 
    $('#R_C-helpPage02').html(helpPage02 + '<br />'); 
    $('#R_C-helpPage03').html(helpPage03 + '<br />'); 
      $('#R_C-helpPage04').html(helpPage04 + '<br />'); 

如果您需要更多的信息來做出合理地刺穿它，讓我知道。

Answer 1

對於每個複選框，你應該添加一個額外的相對屬性和附加類

<input type="checkbox" rel="1" id="R_C-helpPage01" name="helpPage01" value="helpPage01" class="R_C R_C-width20 helpcb" /> 
    <label id="R_C-helpPage01" class="W_E"></label> 

    <input type="checkbox" rel="2" id="R_C-helpPage02" name="R_C-helpPage02" value="helpPage02" class="R_C R_C-width20 helpcb" /> 
    <label id="R_C-helpPage02" class="R_C"></label> 

    <input type="checkbox" rel="3" id="R_C-helpPage03" name="R_C-helpPage03" value="helpPage03" class="R_C R_C-width20 helpcb" /> 
    <label id="R_C-helpPage03" class="R_C"></label> 

現在，而不是50倍結合的複選框元素，你可以只使用一個選擇，並綁定所有複選框到一個功能。下面的代碼選擇具有類「helpcb」

$('input[type="checkbox"].helpcb').click(function(e){ 
    var id = $(this).attr('rel'); // This will extract the "rel" attribute of the checkbox that was checked 
    // do other stuff 
}); 

而且所有複選框，而不是定義您的幫助頁面50個不同的變量，你應該使用數組

var helpPage = ['About Us', 'Contact Us', 'Other page']; 
alert(helpPage[1]); // Alerts 'contact us'