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'