[英]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.