CODEWITHSUNDEEP
javascriptjquerycssthis
ani_css
ani_css

Reputation: 2126

using jquery 'this' methods

how many parameters are there in jquery for below example how do I have to use this

I have two select box and both of them are same if I change value of my select 1 another select has been chancing too and this is something that should not be that's why I want to prevent this how can I do that ?

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

Upvotes: 0

Views: 66

Answers (1)

holi-java
holi-java

Reputation: 30686

you must provide a context which to find the elements not find elements in the document.

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

Upvotes: 5

Related Questions