使用 jQuery 'this' 方法

Question

jQuery中有多少个参数以示例我如何使用 this

我有两个选择框，如果我更改选择的值1，另一个选择的值也是如此，这也不应该这样，这就是为什么我想预防这个我该怎么做？<<<</p>

$(document).ready(function() {
  $(".person-1, .person-2").change(function() {
    var val1 = parseInt($('.person-1').find(":selected").text()),
      val2 = parseInt($('.person-2').find(":selected").text());
    $(".addition-1").text(val1);
    $(".addition-2").text(val2);
    $(".addition").text(val1 + val2);
  });
});

select {
  width: 150px;
  height: 40px;
}
.personBox {
  background: #FFF;
  width: 350px;
  border: 1px solid #ccc;
  padding: 10px;
  float: left;
  margin-right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="personBox">
  <h2>SELECT 1</h2>
  <select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <p>Add 1: <span class="addition-1"></span></p>
  <p>Add 2: <span class="addition-2"></span></p>
  <p>Addition : <span class="addition"></span> </p>
</div>
<!-- personBox-->
<div class="personBox">
  <h2>SELECT 2</h2>
  <select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <p>Add 1: <span class="addition-1"></span></p>
  <p>Add 2: <span class="addition-2"></span></p>
  <p>Addition : <span class="addition"></span> </p>
</div>
<!-- personBox-->

Answer 1

您必须提供一个上下文，以找到该元素在文档中找不到元素。

$(document).ready(function() {
  $(".person-1, .person-2").change(function() {
    var context=$(this).closest('div');
    var val1 = parseInt($('.person-1',context).find(":selected").text()),
      val2 = parseInt($('.person-2',context).find(":selected").text());
    $(".addition-1",context).text(val1);
    $(".addition-2",context).text(val2);
    $(".addition",context).text(val1 + val2);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="personBox">
  <h2>SELECT 1</h2>
  <select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <p>Add 1: <span class="addition-1"></span></p>
  <p>Add 2: <span class="addition-2"></span></p>
  <p>Addition : <span class="addition"></span> </p>
</div>
<!-- personBox-->
<div class="personBox">
  <h2>SELECT 2</h2>
  <select class="person-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <select class="person-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <p>Add 1: <span class="addition-1"></span></p>
  <p>Add 2: <span class="addition-2"></span></p>
  <p>Addition : <span class="addition"></span> </p>
</div>
<!-- personBox-->