Question

我有一个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>

我想将class total_payment的值设置为＆＃39; 12345＆＃39;当我改变类car_no的选项。这是我的jquery代码。

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

它不起作用。我怎么能这样做。

Answer 1

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

找到最近点击元素的父元素，在其兄弟姐妹中找到total_payment。

Answer 2

＆＃13;

$(".car_no").change(function() {
  $(this).closest('.slide_content').siblings().find('.total_payment:first').text('12345');
});

＆＃13;

<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>

＆＃13;

试试这种方式。获取您要输出的div的兄弟选择的父级，然后使用.siblings()

Answer 3

为什么要在简单的方式下编写块代码？由于您的代码结构很简单，您可以遵循以下方式：

为<label>分配ID。

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

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

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

Answer 4

为了使用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一起使用。

找不到jquery中的next（）

4 个答案: