javascript - 尝试找到一种更有效的方法来进行多次替换，而无需在 jQuery 中重复相同的代码

Question

我有一堆<select> s 包裹着 #selector1 , #selector2 , #selector3等等我还有一堆h1包裹着#data1 , #data2 , #data3 .

每次#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

无需重复这样的代码，只需将其设为通用，按类绑定(bind)，然后通过 $(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 ... -->