Question

我有一堆<select>包裹着#selector1，#selector2，#selector3等等。我还有一堆h1包裹着#data1 {1}}，#data2，#data3。

每次更改每个#selector的下拉列表时，它都会替换各自#data中的文字。例如，更改#selector1中的下拉菜单会更改#data1中的文字。

为了更好的主意，这是我的代码：

＆＃13;

$("#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();
});

＆＃13;

.title { font-size: 16px;}

＆＃13;

<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 ... -->

＆＃13;

如您所见，jQuery的效率非常低。因为我必须一遍又一遍地重复相同的代码，只更改每个选择器的数量。

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

Answer 1

无需像这样复制代码，只需将其设为通用，按类绑定，然后通过$(this)...访问值。您可以使用h1选择器的数据属性。

你可以这样改进：

＆＃13;

$(".choose").on('change', function(e) {
  var id = $(this).data('id');
  var text = $(this).find(":selected").text();
  $('#' + id + ' .title').text(text);
  e.preventDefault();
});

＆＃13;

.title { font-size: 16px;}

＆＃13;

<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 ... -->

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

.title { font-size: 16px;}

＆＃13;

   

    <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 ... -->

＆＃13;

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
});

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

3 个答案: