简体   繁体   English

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

[英]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 . 我有一堆用#selector1#selector2#selector3等包裹的<select> 。我也有一堆用#data1#data2#data3包裹的h1

Each time the dropdown in each #selector is changed, it replaces the text in its respective #data . 每次更改每个#selector的下拉菜单时,它都会替换其各自的#data的文本。 So for example changing the dropdown in #selector1 changes the text in #data1 . 因此,例如,更改#selector1的下拉列表将更改#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. 如您所见,jQuery非常低效。 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? 什么是更好,更有效的方法?

No need to duplicate the code like this, simply make it generic, bind by class, and access the values via $(this)... . 无需复制这样的代码,只需使其通用,按类绑定,并通过$(this)...访问值。 You can use data attributes for the selector of h1 . 您可以将数据属性用作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 ... --> 

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM