find next()在jquery中不起作用

3phpmpom  于 2023-06-22  发布在  jQuery
关注(0)|答案(4)|浏览(130)

我有一个HTML格式如下。

<div class="col-md-3 slide_content">
    <div class="form-group">
        <label for="">How many car?</label>
        <select class="form-control car_no" name="number_of_car" data-amount="<?php $ad = $prices->totalAmount; echo $ad; ?>">
            <option value="" selected>select car numbers</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
    </div>
</div>
<div class="col-md-3 slide_content">
    <div class="form-group">
        <label for="">Method to pay?</label>
        <select class="form-control ad_tt" name="payment_method">
            <option value="">Select Type</option>
            <option value="1">Full Payment</option>
            <option value="2">Advance Payment</option>
        </select>
    </div>
</div>
<div class="col-md-3 slide_content">
    <div class="form-group">
        <label for="">Paying amount</label>
        <div class="total_payment"></div>
    </div>
</div>

我想在更改类car_no的选项时将类total_payment的值设置为类似'12345'的值。这是我的jquery代码。

$(document).ready(function() {
    $(".car_no").change(function() {
        $(this).closest('.slide_content').next('.slide_content').next('.slide_content').find('.total_payment:first').innerHTML = '12345';
    });
});

它不工作。我怎么能这么做。

lzfw57am

lzfw57am1#

$(document).ready(function() {
  $(".car_no").change(function() {
    $(this).closest('.slide_content.col-md-3').siblings().find('.total_payment').html("12345");
  });
});

查找被单击元素的最近父元素,在其兄弟元素中查找total_payment

sc4hvdpw

sc4hvdpw2#

$(".car_no").change(function() {
  $(this).closest('.slide_content').siblings().find('.total_payment:first').text('12345');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-3 slide_content">
  <div class="form-group">
    <label for="">How many car?</label>
    <select class="form-control car_no" name="number_of_car" data-amount="<?php $ad = $prices->totalAmount; echo $ad; ?>">
      <option value="" selected>select car numbers</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </div>
</div>
<div class="col-md-3 slide_content">
  <div class="form-group">
    <label for="">Method to pay?</label>
    <select class="form-control ad_tt" name="payment_method">
      <option value="">Select Type</option>
      <option value="1">Full Payment</option>
      <option value="2">Advance Payment</option>
    </select>
  </div>
</div>
<div class="col-md-3 slide_content">
  <div class="form-group">
    <label for="">Paying amount</label>
    <div class="total_payment"></div>
  </div>
</div>

试试这边获取要输出的div的父级,然后使用.siblings()

qzwqbdag

qzwqbdag3#

当你可以用一种简单的方式来做的时候,为什么你要写一堆代码呢?因为你的代码结构很简单,你可以这样做:
<label>分配ID。

<label id='amount' for="">Paying amount</label>

<select>被更改时,通过引用其ID来更新标签。

$(".car_no").change(function() {
$('label#amount').html("12345");
}
yc0p9oo0

yc0p9oo04#

为了使用next('selector'),目标选择器应该是当前元素的兄弟。在本例中,.next('.slide_content')不是select标记的直接兄弟标记。所以你可以先调用parent(),直到select标记的目标同级级别,然后执行next()
这个方法的作用是:

$(this).parents('.slide_content').next('.slide_content').next('.slide_content').find('.total_payment:first').html('asdfa');

还有两件事,innerHTML是一个JavaScript函数,不能与jquery一起使用。

相关问题