主页 / 问题 / 1323294
Accepted
kiskiskit
Asked:2022-09-01 16:15:15 +0000 UTC2022-09-01 16:15:15 +0000 UTC

如何将接收到的 DOM 值相乘？

  • 772

能否请您告诉我如何将以下公式应用于与滑块的交互：第一个值 * 第二个值 = 总量，并将结果值显示在 DOM 中。

在计算中不应考虑滑块值

我失败的代码：

$(document).ready(function(){
  $('#range-yellow').range({
    min: 100,
    max: 1000,
    start: 200,
    onChange: function(value) {
      $('#display-3').html(value);
      let calc =  oneItem * twoItem
      sumItem.text(calc);
    }
  });
});





let oneItem = $(".range-price-item-1");

let twoItem = $(".range-price-item-2");

let sumItem = (".range-price-item-3");
<link href="https://tyleryasaka.github.io/semantic-ui-range/range.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://tyleryasaka.github.io/semantic-ui-range/range.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="range-conin-wrapper">
        <div class="range-coin">
           <div class="range-input">
            <div class="ui yellow range" id="range-yellow">
              <p>
              Value: <span id="display-3">          </span>
          </p>
            </div>
           </div>
           <div class="range-price">
          <div class="range-price-item">
             <div class="range-price-item-1">
               <h1>Первое значение</h1>
               <p>1</p>
             </div>
            <div class="range-price-item-2">
               <h1>Второе значение</h1>
              <p>2</p>
            </div>
            <div class="range-price-item-3">
              <h1>Итоговая сумма</h1>
              <p>3</p>
            </div>
                   
        </div>
         </div>

javascript

1 个回答

  1. Best Answer

    let oneItem = $(".range-price-item-1 p");
let twoItem = $(".range-price-item-2 p");
let sumItem = $(".range-price-item-3 p");

$('#range-yellow').range({
  min: 100,
  max: 1000,
  start: 200,
  onChange: function(value) {
    $('#display-3').html(value);
    sumItem.text(+oneItem.text() * +twoItem.text() * +value);
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://tyleryasaka.github.io/semantic-ui-range/range.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<link href="https://tyleryasaka.github.io/semantic-ui-range/range.css" rel="stylesheet" />

<div class="range-input">
  <div class="ui yellow range" id="range-yellow">
    <p>
      Value: <span id="display-3"></span>
    </p>
  </div>
</div>
<div class="range-price">
  <div class="range-price-item">
    <div class="range-price-item-1">
      <h1>Первое значение</h1>
      <p>3</p>
    </div>
    <div class="range-price-item-2">
      <h1>Второе значение</h1>
      <p>4</p>
    </div>
    <div class="range-price-item-3">
      <h1>Итоговая сумма</h1>
      <p>0</p>
    </div>
  </div>
</div>

    • 2

相关问题