javascript - 使用 iCheck-helper 时如何通过类获取下一个跨度元素值？

Question

iCheck-helper使用 bootstrap 和 jQuery时，我需要根据类名获取下一个 span 元素值。我在下面提供我的代码。

$(".price-efect").on('ifChanged', function(event) {
  $("input[name='vehicleprice']").val(
    $("input[name='sVehicle']:checked").nextAll(".badge").text()
  );
  console.log('price1', $("input[name='sVehicle']:checked").nextAll(".badge").text());
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/blue.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="col-md-3 tourpricecolumn">
  <h6>Select Vehicle</h6>
  <label class="radio">
        <input type="radio" name="sVehicle" class="price-efect">
        <span class="checkround"></span>Car &nbsp;
        <span class="badge badge-pill badge-primary">435</span>
      </label>
  <div class="clear"></div>
  <label class="radio">
        <input type="radio" name="sVehicle" class="price-efect">
        <span class="checkround"></span>Bus &nbsp;
        <span class="badge badge-pill badge-primary">356</span>
      </label>
  <div class="clear"></div>
  <input type="hidden" value="" name="vehicleprice" />
</div>

在这里，我需要获取 class= 的下一个 span 元素值badge。我这样做了，但无法得到任何结果。

标签： javascriptjquerytwitter-bootstrapicheck

Answer 1

创建了必要的小提琴。让我知道这是否适合你。

$(".price-efect").on('change', function(event) {
        var selectedbadgeprice = $("input[name='sVehicle']:checked").nextAll(".badge").text();
        var unselectedbadgeprice = $("input[name='sVehicle']").not(':checked').nextAll(".badge").text();
        alert("selectedbadgeprice : " + selectedbadgeprice);
        alert("unselectedbadgeprice : " + unselectedbadgeprice);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="col-md-3 tourpricecolumn">
        <h6>Select Vehicle</h6>
        <label class="radio">
            <input type="radio" name="sVehicle" class="price-efect">
            <span class="checkround"></span>Car &nbsp;
            <span class="badge badge-pill badge-primary">435</span>
        </label>
        <div class="clear"></div>
        <label class="radio">
            <input type="radio" name="sVehicle" class="price-efect">
            <span class="checkround"></span>Bus &nbsp;
            <span class="badge badge-pill badge-primary">356</span>
        </label>
        <div class="clear"></div>
        <input type="hidden" value="" name="vehicleprice" />
    </div>

https://jsfiddle.net/qy4h7evz/