Tengo un montón de <select> envuelto con #selector1, #selector2, #selector3, etc. También tengo un montón de h1 envuelto con {{X5} }, #data2, #data3.

Cada vez que se cambia el menú desplegable en cada #selector, reemplaza el texto en sus respectivos #data. Entonces, por ejemplo, cambiar el menú desplegable en #selector1 cambia el texto en #data1.

Para una mejor idea, aquí está mi código:

$("#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 ... -->

Como puede ver, jQuery es muy ineficiente. Porque tengo que repetir el mismo código una y otra vez, solo cambiando el número para cada selector.

¿Cuál es una manera mejor y más eficiente de hacer esto?

0
deathlock 29 oct. 2017 a las 21:56

3 respuestas

La mejor respuesta

No es necesario duplicar el código de esta manera, simplemente hágalo genérico, enlace por clase y acceda a los valores a través de $(this).... Puede usar atributos de datos para el selector de h1.

Puedes mejorarlo así:

$(".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 ... -->
2
Martin Adámek 29 oct. 2017 a las 19:06
 $(".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 ... -->
1
Shishir Arora 29 oct. 2017 a las 19:06
$('.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
});
0
mscdeveloper 29 oct. 2017 a las 19:19