两个jQuery脚本来总结表格输入

我正在建立一些小部件，让用户选择单选按钮和jQuery然后计算总到期。目前，jquery的计算结果混在一起，因为它们在同一页面上。我试过改变#ids等，但它仍然不起作用。以下是我迄今为止：两个jQuery脚本来总结表格输入

的Widget我的表格1

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    function recalculate() { 
     var sum = 0; 

     $("input[type=radio]:checked").each(function() { 
      sum += parseInt($(this).attr("value")); 
     }); 

     $("#output").html(sum.toFixed(2)); 
    } 

    $("input[type=radio]").change(function() { 
     recalculate(); 
     $('#invoice_description').val($(this).attr('rel')); 
    }); 
}); 
</script>

样品

<div class="form-row"> 
    <div class="form-row-title"><input type="radio" class="checkbox" name="register" value="<?php echo $vendor; ?>" checked /></div> 
    <div class="form-row-label">Vendor Registration (Up To 3 Attendees: $<?php echo $vendor; ?>)</div> 
    <div class="clear"></div> 
</div> 

<div class="form-row"> 
    <div class="form-row-title" style="color: #090; font-weight: 700;">Total Due:</div> 
    <div class="form-row-content" style="padding: 10px 0;"><b><span id="output">0.00</span></b></div> 
    <div class="clear"></div> 
</div>

的Widget 2

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    function recalculate() { 
     var sum = 0; 

     $(".dues input[type=radio]:checked").each(function() { 
      sum += parseInt($(this).attr("value")); 
     }); 

     $("#output2").html(sum.toFixed(2)); 
    } 

    $(".dues input[type=radio]").change(function() { 
     recalculate(); 
     $('#dues_description').val($(this).attr('rel')); 
    }); 
}); 
</script>

部件2形式的样品

<div class="form-row"> 
    <div class="form-row-title"> 
    <input type="radio" id="general" class="dues" name="membership" value="<?php echo $general; ?>" rel="General Society Membership" /> 
    </div> 
    <div class="form-row-label">General Society Membership ($<?php echo $general; ?>) <i id="general-tip" class="fa fa-question-circle fa-1x"></i></div> 
    <div class="clear"></div> 
</div> 

<div class="form-row"> 
    <div class="form-row-title" style="color: #090; font-weight: 700;">Total Due:</div> 
    <div class="form-row-content" style="padding: 10px 0;"><b><span id="output2">0.00</span></b></div> 
    <div class="clear"></div> 
</div>

来源

2015-11-17 RiotAct

widget1是否会干扰widget2，但不是相反的方式？我很好奇，因为widget2有一个更具体的输入选择器，而widget1会查找所有检查过的无线电输入。所以在页面上，widget1会查看任何检查的无线电输入，而widget2只会查找在'.dues'中检查的无线电。另外，widget1将监听器连接到屏幕上的所有收音机。 – Brodie

为了避免混淆，这实际上并不是[jQuery小部件]的示例（https://learn.jquery.com/jquery-ui/widget-factory/how-to-use-the-widget-factory/）而你因为你的'sum'变量的作用域而遇到这个问题。你不会遇到这个问题，如果你按照一些小部件的例子:)并将它们应用到你的情况 – wahwahwah

没有说我正在制作一个jQuery小部件，这是一个WordPress的管理小部件使用一些jQuery。总和只在第一个小部件中总计，但第二个小部件添加到第一个小部件总数。如果这是有道理的。我只是尝试添加一个更具体的输入选择器，以部件1以及但没有运气。 – RiotAct

好吧，终于搞定了。这有点棘手，因为我还有其他脚本也在运行，但这对我来说很有用。

function recalculate() { 
    var sum = 0; 

    $(".mtg:checked").each(function() { 
     sum += parseInt($(this).attr("value")); 
    }); 

    $("#output").html(sum.toFixed(2)); 
}

我改变听者为输入类，而不是输入类型。这样我就可以设置不同的班级，并且不会发生冲突。

来源

2015-11-18 06:03:51 RiotAct

两个jQuery脚本来总结表格输入

回答

相关问题