在所有标签中查找单词并在jQuery中替换它

Question

我有多个输入字段，标签以单词"Shop"开头，即 商店信函 ： 店信编号 ： 商店信函文件 ： 我有一个下拉菜单，有两个选项"商店"和"商店"。当从下拉列表中选择商店选项时，我想更改为商店。

这是我到目前为止所做的;

<form action="" id="form_type">
<label for="type">Choose a type:</label>
<select id="type">
<option value="shop">Shop</option>
<option value="store">Store</option>
</select><br><br>
<label for="Shop_Letter">Shop Letter :</label>
<input type="text" id="Shop_Letter" name="Shop_Letter"><br><br>
<label for="Shop_Letter_No">Shop Letter No :</label>
<input type="text" id="Shop_Letter_No" name="Shop_Letter_No"><br><br>
<label for="Shop_Letter_File">Shop Letter File :</label>
<input type="text" id="Shop_Letter_File" name="Shop_Letter_File"><br><br>
</form>

$("#type").on('change', function(){
var shop_letter = $("label[for='Shop_Letter']").html(); //Get the text
var shop_letter_no = $("label[for='Shop_Letter_No']").html(); //Get the text
if (this.value == 'store'){
$("label[for='Shop_Letter']").html(shop_letter.replace("Shop", "Store"));
$("label[for='Shop_Letter_No']").html(shop_letter_no.replace("Shop", "Store"));
}else{
$("label[for='Shop_Letter']").html(shop_letter.replace("Store", "Shop"));
$("label[for='Shop_Letter_No']").html(shop_letter_no.replace("Store", "Shop"));
}
});

当我手动选择标签并分配变量时，它确实以这种方式工作，但我想选择所有标签并使用正确的方法更改它。我自己似乎无法弄清楚这一点。 谢谢

Answer 1

请考虑以下几点。

$(function() {
function changeLabel(tObj, v) {
tObj = $(tObj);
tObj.html(v + tObj.text().slice(tObj.text().indexOf(" ")));
}
$("#type").on('change', function() {
var sel = $(this).val();
sel = sel.charAt(0).toUpperCase() + sel.slice(1);
$("#form_type label").each(function(i, el) {
if (i !== 0) {
changeLabel(el, sel);
}
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="form_type">
<label for="type">Choose a type:</label>
<select id="type">
<option value="shop">Shop</option>
<option value="store">Store</option>
</select><br><br>
<label for="Shop_Letter">Shop Letter :</label>
<input type="text" id="Shop_Letter" name="Shop_Letter"><br><br>
<label for="Shop_Letter_No">Shop Letter No :</label>
<input type="text" id="Shop_Letter_No" name="Shop_Letter_No"><br><br>
<label for="Shop_Letter_File">Shop Letter File :</label>
<input type="text" id="Shop_Letter_File" name="Shop_Letter_File"><br><br>
</form>

如果你有一个字符串："Shop Letter File :"并且你想用Store替换Shop，你可以使用.slice()。我们使用 Slice 从第一个" "中获取文本，并在新字符串前面附加。我将其移至一个函数，以便一遍又一遍地轻松使用。

然后，我们需要遍历每个需要更改的标签(跳过第一个(，并将此值和新值传递给函数。