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

Question

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

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

<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 从第一个 " " 中获取文本并添加新字符串。我把它移到了一个函数中，使它易于反复使用。

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