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

的示例

 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 属性和其他类

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

现在，您可以只使用选择器并将所有复选框绑定到一个函数，而不是将checkbox元素绑定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'

jQuery以及变量和函数的使用

1 个答案: