文章/答案/技术大牛

发布

社区首页 >问答首页 >如何从范围输入到总金额中增加价值？

问如何从范围输入到总金额中增加价值？
EN

Stack Overflow用户

提问于 2019-12-01 23:27:45

回答 3查看 88关注 0票数 1

我设法总结了来自单选按钮的值，但是我不能从范围输入中添加值，这是如何实现的？然而，由于两个范围输入上的滑块最初的值为1，那么在Sum:应该已经是2了。

$(document).ready(function() {
    $(".in_objem").on('input', function() {
        $(".range-indicator").text($(this).val());
    });
    $(".in_nagrev").on('input', function() {
        $(".nagrev-indicator").text($(this).val());
    });

    // $(".in_objem").on('input', function() {
    //     var elem= parseInt($(this).val());
    // });

    $(".premium-inpts").on('click', function(){
        var sum = 0;
        $('.premium-inpts').each(function(){
            if ($(this).is(':checked')){
                sum = sum + parseInt($(this).next('.flexy-block').attr("price"));
            }
        });
        console.log(sum);
        $("#price-board").text(sum);
        $("#output-price").val(sum);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
	<div>
	    <span class="nagrev-indicator">1</span><span>units1</span>
	</div>
	<div>
		<input class="in_nagrev" name="productivity1" type="range" min="1" max="30" value="1">
	</div>
</div>
<div>
	<div>
	    <span class="range-indicator">1</span><span>units2</span>
	</div>
	<div>
		<input class="in_objem" name="productivity2" type="range" min="1" max="30" value="1">
	</div>
</div>
<div>
    <input class="premium-inpts" id="a" type="radio" value="work">
        <label class="flexy-block" for="a" price="300">
	         <span>Work</span>
        </label>

	<input class="premium-inpts" id="b" type="radio" value="chill">
		<label class="flexy-block" for="b" price="20">
			<span>Chill</span>
		</label>
</div>
<div class="motors-container">
    <input class="premium-inpts" id="c" type="radio" value="Automatic"> 
        <label class="flexy-block" for="c" price="90">
	         <span>Automatic</span>
        </label>

	<input class="premium-inpts" id="d" type="radio" value="Common">
		<label class="flexy-block" for="d" price="0">
			<span>Common</span>
		</label>
</div>
<div class="price-board">Sum: <span id="price-board"></span></div>
<input id="output-price" name="Sum" type="hidden" value="">

也许这是通过数组来完成的，但是我不太擅长js，所以不要严格地判断。

javascript

jquery

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-12-02 00:50:02

可以将所有选中的单选按钮的值与输入事件上的滑块值相加：

$(".in_objem,.in_nagrev").on('input', function() {
   var elem = 0;
   //sum the slider value
   $(".in_objem,.in_nagrev").each(function(){
     elem += Number($(this).val());
   });     
   var v = 0;
   //sum the checked radio buttons
   $('.premium-inpts:checked').each(function(){
     v = v + parseInt($(this).next('.flexy-block').attr("price"));
   });
   $("#price-board").text(v + elem);
   $("#output-price").val(v + elem);
 });
 $(".in_objem,.in_nagrev").trigger('input'); // trigger the event to show the sum on page load

工作代码示例：

$(document).ready(function() {
  $(".in_objem").on('input', function() {
    $(".range-indicator").text($(this).val());
  });
  $(".in_nagrev").on('input', function() {
    $(".nagrev-indicator").text($(this).val());
  });

  $(".in_objem,.in_nagrev").on('input', function() {
    var elem = 0;
    $(".in_objem,.in_nagrev").each(function(){
      elem += Number($(this).val());
    });    
    var v = 0;
    $('.premium-inpts:checked').each(function(){
      v = v + parseInt($(this).next('.flexy-block').attr("price"));
    });
    $("#price-board").text(v + elem);
    $("#output-price").val(v + elem);
  });
  $(".in_objem,.in_nagrev").trigger('input');

  $(".premium-inpts").on('click', function(){
    var sum = 0;
    var n1 = Number($('.in_objem').val());
    var n2 = Number($('.in_nagrev').val());
    sum = n1+n2;
    $('.premium-inpts:checked').each(function(){
      sum = sum + parseInt($(this).next('.flexy-block').attr("price"));
    });
    //console.log(sum);
    $("#price-board").text(sum);
    $("#output-price").val(sum);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div>
    <span class="nagrev-indicator">1</span><span>units1</span>
  </div>
  <div>
    <input class="in_nagrev" name="productivity1" type="range" min="1" max="30" value="1">
  </div>
</div>
<div>
  <div>
    <span class="range-indicator">1</span><span>units2</span>
  </div>
    <div>
      <input class="in_objem" name="productivity2" type="range" min="1" max="30" value="1">
    </div>
  </div>
<div>
  <input class="premium-inpts" id="a" type="radio" value="work"> //this is value for form
    <label class="flexy-block" for="a" price="300">
      <span>Work</span>
    </label>

  <input class="premium-inpts" id="b" type="radio" value="chill">
    <label class="flexy-block" for="b" price="20">
      <span>Chill</span>
    </label>
</div>
<div class="motors-container">
  <input class="premium-inpts" id="c" type="radio" value="Automatic"> //this is value for form
    <label class="flexy-block" for="c" price="90">
       <span>Automatic</span>
    </label>

  <input class="premium-inpts" id="d" type="radio" value="Common">
    <label class="flexy-block" for="d" price="0">
      <span>Common</span>
    </label>
</div>
<div class="price-board">Sum: <span id="price-board"></span></div>
<input id="output-price" name="Sum" type="hidden" value="">

票数 1

Stack Overflow用户

发布于 2019-12-01 23:51:58

您需要获取范围对象的值，并将它们解析为数字，并将它们添加到您的和中：

$(document).ready(function() {

        $(".in_objem").on('input', function() {
            $(".range-indicator").text($(this).val());
        });
        $(".in_nagrev").on('input', function() {
            $(".nagrev-indicator").text($(this).val());
        });


        //$(".in_objem").on('input', function() {
        //  var elem= parseInt($(this).val());
        //});

        $(".premium-inpts").on('click', function(){
            var sum = 0;

            $('.premium-inpts').each(function(){
                if ($(this).is(':checked')){
                    sum = sum + parseInt($(this).next('.flexy-block').attr("price")) + parseInt($(".in_objem").val(),10)+ parseInt($(".in_objem").val(),10) ;
                }
            });
        console.log(sum);
        $("#price-board").text(sum);
        $("#output-price").val(sum);
    });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <div>
        <span class="nagrev-indicator">1</span><span>units1</span>
    </div>
    <div>
        <input class="in_nagrev" name="productivity1" type="range" min="1" max="30" value="1">
    </div>
</div>
<div>
    <div>
        <span class="range-indicator">1</span><span>units2</span>
    </div>
    <div>
        <input class="in_objem" name="productivity2" type="range" min="1" max="30" value="1">
    </div>
</div>
<div>
    <input class="premium-inpts" id="a" type="radio" value="work"> //this is value for form
        <label class="flexy-block" for="a" price="300">
             <span>Work</span>
        </label>

    <input class="premium-inpts" id="b" type="radio" value="chill">
        <label class="flexy-block" for="b" price="20">
            <span>Chill</span>
        </label>
</div>
<div class="motors-container">
    <input class="premium-inpts" id="c" type="radio" value="Automatic"> //this is value for form
        <label class="flexy-block" for="c" price="90">
             <span>Automatic</span>
        </label>

    <input class="premium-inpts" id="d" type="radio" value="Common">
        <label class="flexy-block" for="d" price="0">
            <span>Common</span>
        </label>
</div>
<div class="price-board">Sum: <span id="price-board"></span></div>
<input id="output-price" name="Sum" type="hidden" value="">

票数 0

Stack Overflow用户

发布于 2019-12-01 23:56:53

正如aprouja1所提到的，您需要获得它们的值。要做到这一点，一个简单的方法是在HTML中给两个范围滑块一个ID (例如slider1和slider2)。

然后使用document.getElementById("slider1").value & document.getElementById("slider2").value获取它们的值。您可以将这些数据保存到变量中，并以这种方式计算和。

let slider1Value = document.getElementById("slider1").value;
let slider2Value = document.getElementById("slider2").value;
sum = slider1Value + slider2Value;

票数 0

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

原文链接：

https://stackoverflow.com/questions/59130960

复制

相似问题

问如何从范围输入到总金额中增加价值？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从范围输入到总金额中增加价值？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从范围输入到总金额中增加价值？
EN