时间戳

首页 > 解决方案 > 选择具有相同 CSS 类和 jQuery 的选项

javascript - 选择具有相同 CSS 类和 jQuery 的选项

问题描述

我是 jQuery/JS 的新手，我遇到了这个问题：您可以运行我的代码并查看计数不正确：

$('.form-control').change(function() {
  countTotal();
});

$('.form-control').change(function() {
  countTotal();
});

function countTotal() {


  var level1 = parseInt($(".form-control :selected").val(), 10);
  var level2 = parseInt($(".form-control :selected").val(), 10);


  var total = level1 * level1;


  $(".form-group > #riz").val(total);
  $(".form-group > #riz").attr("disabled", true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div class="form-group">
  <select class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>

<div class="form-group">
  <select class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>
<div class="form-group">
  <input id="riz">
</div>
<hr>

<div class="form-group">
  <select class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>

<div class="form-group">
  <select class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>
<div class="form-group">
  <input id="riz">
</div>

我的 HTML 必须保持不变，我必须找到一些方法让 jQuery 在这个示例中工作并保持 HTML 结构相同。如果您对如何解决此问题有任何想法，请随时发表评论或分享代码想法。
我感谢您的帮助！

标签： javascriptjquery

解决方案

您的代码存在多个问题。

首先，您多次使用相同的 id。ID 必须是唯一的。

二、认为这是错误的var total = level1 * level1;应该是var total = level1 * level2;

第三，您不需要使用:selectedin $(".form-control :selected").val()，因为$(".form-control").val()如果您的元素是一个选择，它将始终采用所选选项的值。

现在我已经更改了您的 html 和 jquery，因此它可以满足您的要求。

演示

$('.form-control').change(function() {
  countTotal($(this));
});

function countTotal(ele) {
  var level1 = parseInt(ele.val() || 0, 10);
  var level2 = parseInt(ele.siblings(".form-control").val() || 0, 10);

  var total = level1 * level2;

  ele.closest(".form-group").next().find(".riz").val(total);
  ele.closest(".form-group").next().find(".riz").attr("disabled", true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div class="form-group">
  <select class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <select class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>
<div class="form-group">
  <input class="riz">
</div>
<hr>

<div class="form-group">
  <select class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <select class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>
<div class="form-group">
  <input class="riz">
</div>

推荐阅读