我有一堆<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 的效率非常低。因为我必须一遍又一遍地重复相同的代码,只更改每个选择器的数字。
有什么更好、更有效的方法来做到这一点?
最佳答案
无需重复这样的代码,只需将其设为通用,按类绑定(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 ... -->
关于javascript - 尝试找到一种更有效的方法来进行多次替换,而无需在 jQuery 中重复相同的代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47004042/