问用(jquery，javascript)从范围滑块中计算和
EN

Stack Overflow用户

提问于 2017-03-18 13:58:53

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

我刚开始使用javascipt，我想构建一个模拟器来获取文章的总价，我找到了一个这样做的教程，但是代码对我不起作用，我认为把jquery或ajax库导入到我的代码中是错误的：

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
        <script type="text/javascript">

  $(document).on("pagecreate", "#page1", function () {
    $(".add").on("change", function () {
        addAll();
    });

    addAll();
});

function addAll() {
    var sum = 0
    $('.add').each(function (){        
       sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);        
    });
    $('#total').html(sum);
}


            </script>

</head> 

    <body>

  <div data-role="page" id="page1">
      <div data-role="header">
           <h1>My page</h1> 
      </div>
      <div role="main" class="ui-content">
          <div id="mysliders">
              <label for="slider-1">Slider:</label>
              <input class="add" type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" />
              <label for="slider-2">Slider:</label>
              <input class="add" type="range" name="slider-2" id="slider-2" min="0" max="100" value="40" />
              <label for="slider-3">Slider:</label>
              <input class="add" type="range" name="slider-3" id="slider-3" min="0" max="100" value="30" />
              <label for="slider-4">Slider:</label>
              <input class="add" type="range" name="slider-4" id="slider-4" min="0" max="100" value="65" />
              <label for="slider-5">Slider:</label>
              <input class="add" type="range" name="slider-5" id="slider-5" min="0" max="100" value="11" />
              <label for="slider-6">Slider:</label>
              <input class="add" type="range" name="slider-6" id="slider-6" min="0" max="100" value="90" />
          </div>
          <hr />
          <p>Total: <strong id="total"></strong></p>
      </div>
      <div data-role="footer" data-position="fixed">
           <h1>Footer</h1> 
      </div>
  </div>

</body>
</html>

坦克帮了我。

javascript

jquery

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-18 14:16:06

下面是带有注释的片段。我已经删除了$(document).on("pagecreate", "#page1", functi...包装并缩短了加法行。

// I have omitted the 'pagecreate' line as it appears to have been taken out of its context and was not functioning here. The following should be sufficient

$(".add").on("change", function() {
  addAll();
});

addAll();

function addAll() {
    var sum = 0; // you had a missing semi-colon here
    $('.add').each(function (){        
 //      sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
       sum += parseFloat(this.value) || 0; // the other line works but this is simpler and shorter, if for any reason the value returned isn't a number it will choose a zero.
    });
    $('#total').html(sum);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-role="page" id="page1">
  <div data-role="header">
    <h1>My page</h1>
  </div>
  <div role="main" class="ui-content">
    <div id="mysliders">
      <label for="slider-1">Slider:</label>
      <input class="add" type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" />
      <label for="slider-2">Slider:</label>
      <input class="add" type="range" name="slider-2" id="slider-2" min="0" max="100" value="40" />
      <label for="slider-3">Slider:</label>
      <input class="add" type="range" name="slider-3" id="slider-3" min="0" max="100" value="30" />
      <label for="slider-4">Slider:</label>
      <input class="add" type="range" name="slider-4" id="slider-4" min="0" max="100" value="65" />
      <label for="slider-5">Slider:</label>
      <input class="add" type="range" name="slider-5" id="slider-5" min="0" max="100" value="11" />
      <label for="slider-6">Slider:</label>
      <input class="add" type="range" name="slider-6" id="slider-6" min="0" max="100" value="90" />
    </div>
    <hr />
    <p>Total: <strong id="total"></strong></p>
  </div>
  <div data-role="footer" data-position="fixed">
    <h1>Footer</h1>
  </div>
</div>

票数 1

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

原文链接：

https://stackoverflow.com/questions/42875302

复制

相似问题

问用(jquery，javascript)从范围滑块中计算和
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用(jquery，javascript)从范围滑块中计算和EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用(jquery，javascript)从范围滑块中计算和
EN