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

您应该为每个复选框添加一个额外的 rel 属性和一个额外的 class

  <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'