CODEWITHSUNDEEP
javascriptjquery
deathlock
deathlock

Reputation: 2837

Trying to find a more efficient way to do multiple replaces without repeating the same code in jQuery

I have a bunch of <select>s wrapped with #selector1, #selector2, #selector3, etc. I also have a bunch of h1 wrapped with #data1, #data2, #data3.

Each time the dropdown in each #selector is changed, it replaces the text in its respective #data. So for example changing the dropdown in #selector1 changes the text in #data1.

For a better idea, here is my code:

$("#selector1 .choose").on('change', function(e) {
  var titleName = $('#selector1 .choose').find(":selected").text();
  $("#data1 .title").text(titleName);
  e.preventDefault();
});
$("#selector2 .choose").on('change', function(e) {
  var titleName = $('#selector2 .choose').find(":selected").text();
  $("#data2 .title").text(titleName);
  e.preventDefault();
});
$("#selector3 .choose").on('change', function(e) {
  var titleName = $('#selector3 .choose').find(":selected").text();
  $("#data3 .title").text(titleName);
  e.preventDefault();
});
.title { font-size: 16px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selector1">
 <select class="choose">
   <option value="1">Test 1</option>
   <option value="2">Test 2</option>
   <option value="3">Test 3</option>
 </select>
</div>
<div id="selector2">
 <select class="choose">
   <option value="1">Test 1</option>
   <option value="2">Test 2</option>
   <option value="3">Test 3</option>
 </select>
</div>
<div id="selector3">
 <select class="choose">
   <option value="1">Test 1</option>
   <option value="2">Test 2</option>
   <option value="3">Test 3</option>
 </select>
</div>
<!-- etc ... -->


<div id="data1">
<h1 class="title">
Test 0
</h1>
</div>
<div id="data2">
<h1 class="title">
Test 0
</h1>
</div>
<div id="data3">
<h1 class="title">
Test 0
</h1>
</div>
<!-- etc ... -->

As you can see, the jQuery is very inefficient. Because I have to repeat the same code over and over again, only changing the number for each selector.

What's a better, more efficient way to do this?

Upvotes: 0

Views: 43

Answers (3)

mscdeveloper
mscdeveloper

Reputation: 2889

$('.choose').change(function() {
    var this_nr=$(this).parent().attr('id').substr(-1);     //get curent nr from parent id
    var this_val=$(this).val();                             //get value from curent select
    $('#data'+this_nr+' .title').text(this_val);            //add value to output
});

Upvotes: 0

Shishir Arora
Shishir Arora

Reputation: 5923

 $(".choose").on('change', function(e) {
      var id = e.target.getAttribute('data-id');
      var titleName = $(this).find(":selected").text();
      $("#"+id+" .title").text(titleName);
      e.preventDefault();
    });
    
.title { font-size: 16px;}
   

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="selector1">
     <select class="choose" data-id="data1">
       <option value="1">Test 1</option>
       <option value="2">Test 2</option>
       <option value="3">Test 3</option>
     </select>
    </div>
    <div id="selector2" >
     <select class="choose" data-id="data2">
       <option value="1">Test 1</option>
       <option value="2">Test 2</option>
       <option value="3">Test 3</option>
     </select>
    </div>
    <div id="selector3" >
     <select class="choose" data-id="data3">
       <option value="1">Test 1</option>
       <option value="2">Test 2</option>
       <option value="3">Test 3</option>
     </select>
    </div>
    <!-- etc ... -->


    <div id="data1">
    <h1 class="title">
    Test 0
    </h1>
    </div>
    <div id="data2">
    <h1 class="title">
    Test 0
    </h1>
    </div>
    <div id="data3">
    <h1 class="title">
    Test 0
    </h1>
    </div>
    <!-- etc ... -->

Upvotes: 1

Martin Ad&#225;mek
Martin Ad&#225;mek

Reputation: 18389

No need to duplicate the code like this, simply make it generic, bind by class, and access the values via $(this).... You can use data attributes for the selector of h1.

You can improve it like this:

$(".choose").on('change', function(e) {
  var id = $(this).data('id');
  var text = $(this).find(":selected").text();
  $('#' + id + ' .title').text(text);
  e.preventDefault();
});
.title { font-size: 16px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selector1">
 <select class="choose" data-id="data1">
   <option value="1">Test 1</option>
   <option value="2">Test 2</option>
   <option value="3">Test 3</option>
 </select>
</div>
<div id="selector2">
 <select class="choose" data-id="data2">
   <option value="1">Test 1</option>
   <option value="2">Test 2</option>
   <option value="3">Test 3</option>
 </select>
</div>
<div id="selector3">
 <select class="choose" data-id="data3">
   <option value="1">Test 1</option>
   <option value="2">Test 2</option>
   <option value="3">Test 3</option>
 </select>
</div>
<!-- etc ... -->


<div id="data1">
<h1 class="title">
Test 0
</h1>
</div>
<div id="data2">
<h1 class="title">
Test 0
</h1>
</div>
<div id="data3">
<h1 class="title">
Test 0
</h1>
</div>
<!-- etc ... -->

Upvotes: 2

Related Questions