試圖找到一種更有效的方法來進行多次替換，而無需在jQuery中重復相同的代碼

Question

我有一堆用#selector1 ， #selector2 ， #selector3等包裹的<select> 。我也有一堆用#data1 ， #data2 ， #data3包裹的h1 。

每次更改每個#selector的下拉菜單時，它都會替換其各自的#data的文本。 因此，例如，更改#selector1的下拉列表將更改#data1的文本。

為了更好的主意，這是我的代碼：

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

如您所見，jQuery非常低效。 因為我必須一遍又一遍地重復相同的代碼，所以只需更改每個選擇器的編號。

什么是更好，更有效的方法？

Answer 1

無需復制這樣的代碼，只需使其通用，按類綁定，並通過$(this)...訪問值。 您可以將數據屬性用作h1的選擇器。

您可以像這樣改善它：

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

Answer 2

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

Answer 3

$('.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
});