首页 文章

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

提问于
浏览 次
1

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

我有一个jQuery脚本，隐藏表单的某些部分（在DIV中），具体取决于所选的单选按钮 . 这是一种基本形式，用户输入数量，价格，并且每当更改任何值时，值都会相乘，并在页面上自动更新总值 . 当我想在每次选择单选按钮时简单地调用一个名为“updateFields（）”的函数时，就会出现问题 . 基本上updateFields将更新整个表单中的所有总计 . 最初我的代码没有“updateFields（）;” line（下面总共有2个调用它）并且效果很好 . 但是，在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（）运行正常 . （每当有人按下键键入文本框时，我都会运行它） .

jquery

2 回答

  • 0

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

    $(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() 函数之外，我不认为它属于那里 .

    FINAL EDIT ：

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

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

    回复于
  • 0

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

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

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

    Edit

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

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

相关问题