Question

JSfiddle：http://jsfiddle.net/fyr3b/13/

我有一个jQuery脚本，根据选择的单选按钮隐藏表单的某些部分（在DIV中）。这是一种基本形式，用户输入数量，价格，并且每当更改任何值时，值都会相乘，并在页面上自动更新总值。当我想在每次选择单选按钮时简单地调用一个名为“updateFields（）”的函数时，就会出现问题。基本上updateFields将更新整个表单中的所有总计。最初我的代码没有“updateFields（）;” line（下面总共有两个调用它）并且效果很好。但是，在updateFields（）中添加之后;函数调用，代码不再有效。我已经单独测试了updateFields（）函数，它本身可以正常工作。有谁知道我在这里做错了什么？

以下代码已根据我目前收到的答案进行了更新。但是我仍然遇到相同的症状。谢谢大家！

这是隐藏和显示表单部分的代码：

$(function() {
$('div.hdp').hide(); // Hide all
showCheckbox(); 

$('input.hdppv').click(function() { // When clicked
    $('div.hdp').hide(); // Hide all
    showCheckbox(); 
});
});

var showCheckbox = function(){ 
$('input.hdppv:checked').each(function() { // Show for checked option
    if($(this).val() == 1)
        $('#hdp_1').show();
    else if($(this).val() == 2)
    {
        $('#hdp_1').show();
        $('#hdp_2').show();
    }
    else if($(this).val() == 3)
    {
        $('#hdp_1').show();
        $('#hdp_2').show();
        $('#hdp_3').show();
    }
    else if($(this).val() == 4)
    {
        $('#hdp_1').show();
        $('#hdp_2').show();
        $('#hdp_3').show();
        $('#hdp_4').show();
    }
});
updateFields();
};

以下是updateFields（）

的代码

var updateFields = function() {
var totals = 0;
var quantity1 = $('#quantity1').val();
var quantity2 = $('#quantity2').val();
var quantity3 = $('#quantity3').val();
var quantity4 = $('#quantity4').val();
var price1 = parseFloat($('#price1').val()).toFixed(2);
var price2 = parseFloat($('#price2').val()).toFixed(2);
var price3 = parseFloat($('#price3').val()).toFixed(2);
var price4 = parseFloat($('#price4').val()).toFixed(2);


var type_checked = $('[name="num_products"]:checked').val();
if(type_checked > 0)
{
    totals += parseFloat(quantity1)*parseFloat(price1);
}
if(type_checked > 1)
{
    totals += parseFloat(quantity2)*parseFloat(price2);
}
if(type_checked > 2)
{
    totals += parseFloat(quantity3)*parseFloat(price3);
}
if(type_checked > 3)
{
    totals += parseFloat(quantity4)*parseFloat(price4);
}

if(isNaN(totals))
    var total = 'ERR';

$('#total_box').text('$'+totals); //Change value in text box to the appropriate total       
}

UPDATE1 :: 我想我可以详细说明这是什么类型的页面。这是一个允许用户更改最多4个项目的数量和价格的表单。在页面顶部有4个标有1到4的单选按钮。如果用户选中“1”，则表单将只显示第一个div，即数量和价格的2个文本框。更改任一文本框中的值后，将在表单底部显示一个总值。因此，例如，如果用户检查“1”然后填写2表示数量，5表示价格，则底部的总数将显示10美元。如果用户选中“3”，那么表格的1到3将显示，允许他们输入3种不同的数量和价格，而更改这些数值会改变页面底部的总数。

我想要的是例如，如果用户选择“3”，分别在所有框中填写2和5，则总计应显示30美元。但是，如果他们在选择“1”后选择“1”，则一旦检查“1”，总数应更新为10美元。这就是updateFields（）的作用。该功能只是检查选中哪个单选按钮（1到4）然后相应地计算总数。

UPDATE2 ::我接受了你的建议并移动了updateFields（）;在.each（）函数之外运行。谢谢。但仍有同样的问题。似乎只要我放置updateFields（）;在该函数中的任何地方，即使用户在文本框中进行任何按键，表单也不再更新。但是，如果我删除它updateFields（）运行正常。（每当有人按下键键入文本框时，我都会运行它。）

Answer 1

当您的网页加载时，$('input.hdppv:checked').each()将为每个选中的单选按钮运行updateFields()一次。这是你想要的行为吗？

如果没有看到updateFields()中的最新情况，是否只需要在所有字段都可见后添加它？

$('input.hdppv:checked').each(function() {
    ...
}
updateFields();

修改

第二个请求，只要选中单选按钮就会运行updateFields()：

$('input.hdppv').change(function() { updateFields(); });

Answer 2

首先，我建议的是，创建一个函数并避免两次编写相同的代码，类似这样，

$(function() {
  $('div.hdp').hide(); // Hide all
      showCheckbox(); 
      updateFields();
  });

  $('input.hdppv').click(function() { // When clicked
        $('div.hdp').hide(); // Hide all
        showCheckbox();
        updateFields();
  });
});

 var showCheckbox = function(){ 
    $('input.hdppv:checked').each(function() { // Show for checked option
       if($(this).val() == 1)
            $('#hdp_1').show();
        else if($(this).val() == 2)
        {
            $('#hdp_1').show();
            $('#hdp_2').show();
        }
        else if($(this).val() == 3)
        {
            $('#hdp_1').show();
            $('#hdp_2').show();
            $('#hdp_3').show();
        }
        else if($(this).val() == 4)
        {
            $('#hdp_1').show();
            $('#hdp_2').show();
            $('#hdp_3').show();
            $('#hdp_4').show();
        }
    });
  };

并将updateFields();放在each()函数之外，我不认为它属于那里。

最终编辑：

showCheckbox()＆amp;的功能定义在调用它们之前需要编写updateFields()，现在看一下代码，

http://jsfiddle.net/fyr3b/25/

用于隐藏DIV的jQuery脚本在添加简单函数调用时不起作用

2 个答案: