RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1320068
Accepted
kiskiskit
kiskiskit
Asked:2022-08-21 23:21:47 +0000 UTC2022-08-21 23:21:47 +0000 UTC 2022-08-21 23:21:47 +0000 UTC

如何从输入中拆分值?

  • 772

$(document).ready(function(){
  $('#range-yellow').range({
    min: 100,
    max: 1000,
    start: 200,
    onChange: function(value) {
      $('#display-3').html(value);
    }
  });
});




var savingsCoins = +$('#savingsCoins').text().split("$")[0];
 
  var savingsMonthly = +$('#savingsMonthly').text();
  var savingsGains = +$('#savingsGains').text();
 
  $('.range-input').on('.range-input', function() {
    var energyBill = +$('#energyBill').val();
    $('#range-value').text(energyBill);
 
    $('#savingsMonthly').text(savingsMonthly / energyBill);
    $('#savingsCoins').text(savingsCoins / energyBill + "$");
    $('#savingsGains').text(savingsGains  / energyBill);
 
  });
<script src="https://tyleryasaka.github.io/semantic-ui-range/range.js"></script>
<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://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"></div>
           </div>
           <div class="range-price">
                <div class="range-price-item">
                  <p>
      Value: <span id="display-3"></span>
    </p>
                    <h4>Первое значение</h4>
                    <p id="savingsCoins">0.12$</p>
                </div>
                <div class="range-price-item">
                    <h4>просто цифры</h4>
                    <p id="savingsYearly">907,929,000</p>
                </div>
                <div class="range-price-item">
                    <h4>Ззначение с инупута</h4>
                    <div class="range-price-item-footer">
                        <div class="icon-range-price-item">
                            <svg width="21" height="19" viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <ellipse cx="10.2575" cy="9.41842" rx="9.92056" ry="9.15744" fill="#89EEAB"/>
                                <path d="M13.55 11.6347C13.55 9.9913 12.1281 9.56006 10.8344 9.25703V7.27568C11.4171 7.34561 12.0232 7.54375 12.6176 7.88174L13.2003 6.44818C12.5593 6.04025 11.7085 5.80715 10.8344 5.73722V4.46683H9.66886V5.76053C7.82737 5.97032 6.92994 7.03093 6.92994 8.26636C6.92994 9.93302 8.37516 10.3643 9.66886 10.6789V12.6253C8.8297 12.5437 7.99054 12.2291 7.40779 11.7978L6.76677 13.2197C7.40779 13.7209 8.51502 14.0822 9.66886 14.1521V15.4225H10.8344V14.1172C12.6642 13.8957 13.55 12.8468 13.55 11.6347ZM8.80639 8.17312C8.80639 7.7885 9.05115 7.45051 9.66886 7.31065V8.96566C9.15604 8.80249 8.80639 8.58104 8.80639 8.17312ZM10.8344 12.5787V10.9703C11.3355 11.1451 11.6735 11.3666 11.6735 11.7745C11.6735 12.1475 11.4171 12.4505 10.8344 12.5787Z" fill="#3F3F3F"/>
                                </svg>                                
                        </div>
                        <p id="savingsMonthly">20</p>
                    </div>
                    
                </div>
                <div class="range-price-item">
                    <h4>Итоговое значение</h4>
                    <div class="range-price-item-footer">
                        <div class="icon-range-price-item"><svg width="26" height="20" viewBox="0 0 26 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.043 10.0037L11.2788 18.2141L1.36531 1.12966L21.1923 1.12966L19.1841 4.59055L19.8514 5.17083L22.3539 0.858109C22.5077 0.593166 22.3165 0.261232 22.0102 0.261232L0.547427 0.26123C0.241109 0.26123 0.0499504 0.593164 0.203688 0.858108L2.76703 5.27564L3.39141 4.65126L6.38676 9.78824L4.75845 8.70757L10.9351 19.352C11.0882 19.616 11.4694 19.616 11.6225 19.352L17.744 8.80265L17.7058 8.8683L16.043 10.0037Z" fill="#023047"/>
                            <circle cx="11.3697" cy="4.18729" r="2.0386" fill="#023047"/>
                            <path d="M3.84987 6.05109C3.9393 5.93708 4.07764 5.78219 4.26327 5.59806C4.64122 5.22316 5.19322 4.74875 5.87311 4.28029C7.24048 3.33815 9.07454 2.45455 11.0158 2.39868C13.4245 2.32934 16.1563 3.1863 18.8061 6.07513C15.9427 9.5835 12.6808 9.93353 11.0134 9.93508C9.11239 9.84244 7.28276 8.90605 5.90599 7.91446C5.22087 7.42102 4.6615 6.92364 4.27722 6.53168C4.08484 6.33546 3.94161 6.17102 3.84987 6.05109Z" stroke="#023047" stroke-width="0.942026"/>
                            <path d="M10.6028 11.6788C10.603 11.6288 10.6286 11.5824 10.6707 11.5554L11.8827 10.7809C11.9813 10.718 12.1103 10.7895 12.1092 10.9064L12.0544 16.5163C12.0536 16.597 11.9879 16.662 11.9072 16.662H10.7289C10.6473 16.662 10.5813 16.5957 10.5817 16.5142L10.6028 11.6788Z" fill="#023047"/>
                            </svg>  </div>
                            <p id="savingsGains">13.048</p>            
                    </div>
                        
                </div>
            <button>Купить</button>
           </div>
        </div>
    </div>

你能告诉我如何进行以下计算:

#savingsCoins / #range-price-item = savingsGains

难点在于获取输入范围的值并进一步与之交互

javascript
  • 1 1 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    user176262
    2022-08-21T23:45:35Z2022-08-21T23:45:35Z

    您的 html 没有带有id="energyBill".

    $(document).ready(function() {
      $('#range-yellow').range({
        min: 100,
        max: 1000,
        start: 200,
        onChange: function(value) {
          $('#display-3').html(value);
          var energyBill = +$('#energyBill').val() || 1;
          $('#range-value').text(energyBill);
    
          console.log("change", savingsCoins, savingsMonthly, savingsGains, energyBill);
    
          $('#savingsMonthly').text(savingsMonthly / energyBill);
          $('#savingsCoins').text(savingsCoins / energyBill + "$");
          $('#savingsGains').text(savingsGains / energyBill);
        }
      });
    });
    
    var savingsCoins = +$('#savingsCoins').text().split("$")[0];
    var savingsMonthly = +$('#savingsMonthly').text();
    var savingsGains = +$('#savingsGains').text();
    <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://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>
    
    <div class="range-conin-wrapper">
      <div class="range-coin">
        <div class="range-input">
          <div class="ui yellow range" id="range-yellow"></div>
        </div>
        <div class="range-price">
          <div class="range-price-item">
            <p>
              Value: <span id="display-3"></span>
            </p>
            <h4>Первое значение</h4>
            <p id="savingsCoins">0.12$</p>
          </div>
          <div class="range-price-item">
            <h4>просто цифры</h4>
            <p id="savingsYearly">907,929,000</p>
          </div>
          <div class="range-price-item">
            <h4>Ззначение с инупута</h4>
            <div class="range-price-item-footer">
              <div class="icon-range-price-item">
                <svg width="21" height="19" viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <ellipse cx="10.2575" cy="9.41842" rx="9.92056" ry="9.15744" fill="#89EEAB"/>
                                    <path d="M13.55 11.6347C13.55 9.9913 12.1281 9.56006 10.8344 9.25703V7.27568C11.4171 7.34561 12.0232 7.54375 12.6176 7.88174L13.2003 6.44818C12.5593 6.04025 11.7085 5.80715 10.8344 5.73722V4.46683H9.66886V5.76053C7.82737 5.97032 6.92994 7.03093 6.92994 8.26636C6.92994 9.93302 8.37516 10.3643 9.66886 10.6789V12.6253C8.8297 12.5437 7.99054 12.2291 7.40779 11.7978L6.76677 13.2197C7.40779 13.7209 8.51502 14.0822 9.66886 14.1521V15.4225H10.8344V14.1172C12.6642 13.8957 13.55 12.8468 13.55 11.6347ZM8.80639 8.17312C8.80639 7.7885 9.05115 7.45051 9.66886 7.31065V8.96566C9.15604 8.80249 8.80639 8.58104 8.80639 8.17312ZM10.8344 12.5787V10.9703C11.3355 11.1451 11.6735 11.3666 11.6735 11.7745C11.6735 12.1475 11.4171 12.4505 10.8344 12.5787Z" fill="#3F3F3F"/>
                                    </svg>
              </div>
              <p id="savingsMonthly">20</p>
            </div>
    
          </div>
          <div class="range-price-item">
            <h4>Итоговое значение</h4>
            <div class="range-price-item-footer">
              <div class="icon-range-price-item"><svg width="26" height="20" viewBox="0 0 26 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.043 10.0037L11.2788 18.2141L1.36531 1.12966L21.1923 1.12966L19.1841 4.59055L19.8514 5.17083L22.3539 0.858109C22.5077 0.593166 22.3165 0.261232 22.0102 0.261232L0.547427 0.26123C0.241109 0.26123 0.0499504 0.593164 0.203688 0.858108L2.76703 5.27564L3.39141 4.65126L6.38676 9.78824L4.75845 8.70757L10.9351 19.352C11.0882 19.616 11.4694 19.616 11.6225 19.352L17.744 8.80265L17.7058 8.8683L16.043 10.0037Z" fill="#023047"/>
                                <circle cx="11.3697" cy="4.18729" r="2.0386" fill="#023047"/>
                                <path d="M3.84987 6.05109C3.9393 5.93708 4.07764 5.78219 4.26327 5.59806C4.64122 5.22316 5.19322 4.74875 5.87311 4.28029C7.24048 3.33815 9.07454 2.45455 11.0158 2.39868C13.4245 2.32934 16.1563 3.1863 18.8061 6.07513C15.9427 9.5835 12.6808 9.93353 11.0134 9.93508C9.11239 9.84244 7.28276 8.90605 5.90599 7.91446C5.22087 7.42102 4.6615 6.92364 4.27722 6.53168C4.08484 6.33546 3.94161 6.17102 3.84987 6.05109Z" stroke="#023047" stroke-width="0.942026"/>
                                <path d="M10.6028 11.6788C10.603 11.6288 10.6286 11.5824 10.6707 11.5554L11.8827 10.7809C11.9813 10.718 12.1103 10.7895 12.1092 10.9064L12.0544 16.5163C12.0536 16.597 11.9879 16.662 11.9072 16.662H10.7289C10.6473 16.662 10.5813 16.5957 10.5817 16.5142L10.6028 11.6788Z" fill="#023047"/>
                                </svg> </div>
              <p id="savingsGains">13.048</p>
            </div>
    
          </div>
          <button>Купить</button>
        </div>
      </div>
    </div>

    PS 说的对:“来自输入的值”。

    • 2

相关问题

  • 第二个 Instagram 按钮的 CSS 属性

  • 由于模糊,内容不可见

  • 弹出队列。消息显示不正确

  • 是否可以在 for 循环中插入提示?

  • 如何将 JSON 请求中的信息输出到数据表 Vuetify vue.js?

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    表格填充不起作用

    • 2 个回答
  • Marko Smith

    提示 50/50,有两个,其中一个是正确的

    • 1 个回答
  • Marko Smith

    在 PyQt5 中停止进程

    • 1 个回答
  • Marko Smith

    我的脚本不工作

    • 1 个回答
  • Marko Smith

    在文本文件中写入和读取列表

    • 2 个回答
  • Marko Smith

    如何像屏幕截图中那样并排排列这些块?

    • 1 个回答
  • Marko Smith

    确定文本文件中每一行的字符数

    • 2 个回答
  • Marko Smith

    将接口对象传递给 JAVA 构造函数

    • 1 个回答
  • Marko Smith

    正确更新数据库中的数据

    • 1 个回答
  • Marko Smith

    Python解析不是css

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5