文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将来自不同输入类型的data-price的值相加？

问如何将来自不同输入类型的data-price的值相加？
EN

Stack Overflow用户

提问于 2020-10-09 22:21:04

回答 1查看 22关注 0票数 0

我正在设计一个表单，希望能够采取用户输入和总和为客户看到，因为他们走了。我尝试过使用data-price属性来收集这些值，但是我似乎就是不能让它工作！如果您能指出我的错误所在，我们将不胜感激。

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="utf-8" />
        <title>My test page</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <link href="form-style.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1">
            <div id="go">
                <label>
                    <input type="radio" name="colorRadio" value="one" class="abc" data-price="1600"/>Live Band
                </label>
                <label>
                    <input type="radio" name="colorRadio" value="two" class="abc" data-price="400"/>DJ
                </label>
                <label>
                    <input type="radio" name="colorRadio" value="three" class="abc" data-price="500"/>Acoustic
                </label>
            </div>

            <div id="example" class="container">
                <select id="place">
                    <option value="">pick</option>
                    <option value="a" data-price="100">a</option>
                    <option value="b" data-price="200">b</option>
                    <option value="c" data-price="300">c</option>
                </select>
            </div>
        </form>

        <div id="result" class="container"></div>


    <script>
    $(document).ready(function(){
        function validate(){
            var $selected = $('#go','#place').children(":selected");
            var sum =0;
            
            $selected.each(function(){
                sum += $(this).data('price') || 0;
            });

            $('#result').html(sum === 0 ? '' : sum +'$');
        }
        validate();         
        
        $('#go, #place').on('change',function(){
            validate();
        });
    });
    </script>
</body>

html

jquery

function

回答 1

Stack Overflow用户

发布于 2020-10-09 22:27:35

您的代码中有几个错误，使您无法正确计算sum：

#go不是输入元素，因此永远不会触发change事件。要观察所有输入的更改事件，请改用$('#go input, #place')。

您正在错误地访问选中的单选按钮和选定的选项的值：

$('#go'，'#place').children(":selected")

这是不正确的，因为(1)您没有正确地联接选择器，(2)复选框/单选按钮没有:selected伪类。为了检索选定的单选按钮并选择option，您可以改为执行以下操作：

- To access the checked radio button, use `$('#go input:checked')`
- To access the selected option, use `$('#place option:selected')`

请根据您的代码查看更新后的示例：

$(document).ready(function() {
  function validate() {
    var sum = 0;
    sum += +$('#go input:checked').data('price') || 0;
    sum += +$('#place option:selected').data('price') || 0;

    $('#result').html(sum === 0 ? '' : sum + '$');
  }
  validate();

  $('#go input, #place').on('change', function() {
    validate();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
  <div id=go>
    <label><input type="radio" name="colorRadio" value="one" class="abc" data-price="1600">Live Band</label>
    <label><input type="radio" name="colorRadio" value="two" class="abc" data-price="400">DJ</label>
    <label><input type="radio" name="colorRadio" value="three" class="abc" data-price="500">Acoustic</label>
  </div>
  <div id="example" class="container">
    <select id="place">
      <option value="">pick</option>
      <option value="a" data-price="100">a</option>
      <option value="b" data-price="200">b</option>
      <option value="c" data-price="300">c</option>
    </select>
  </div>
</form>

<div id="result" class="container"></div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64281902

复制

相似问题

问如何将来自不同输入类型的data-price的值相加？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将来自不同输入类型的data-price的值相加？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将来自不同输入类型的data-price的值相加？
EN