jQuery .replaceWith（）方法不起作用

Question

我在使用.replaceWith()遇到問題，它適用於第一次模糊，但不適用於第二次模糊，這是我的代碼：

$("#wilaya").blur(function () {
  $("#wilayaRow .tdrequired").css("color", "#333");
  if ($("#wilaya").val() !== "Selectionnez une wilaya...") {
    $("#wilayaRow .tdrequired label").replaceWith("<img src='../../Images/check-mark-md.png' width='20px' height='28px'></img>");
  }
  else {
    $("#wilayaRow .tdrequired label").replaceWith("<img src='../../Images/red-wrong-cross-md.png' width='20px' height='28px'></img>");
  }
});

這是html部分：

<table>
  <tr id="wilayaRow">
    <td class="tdtitle">
      <label for="wilaya">Wilaya d'immatriculation</label>
    </td>
    <td class="tdinput">
      <select name="wilaya" id="wilaya">
        <option>Selectionnez une wilaya...</option>
        <option>Khalil</option>
        <option>Moh</option>
      </select>
    </td>
    <td class="tdrequired">
      <label>*</label>
    </td>
  </tr>
  ...
</table>

謝謝您的幫助:)

Answer 1

這是我剛剛實現的有效jQuery代碼：

    $("#wilaya").blur(function () {
            $("#wilayaRow .tdrequired").css("color", "#333");
            if ($("#wilaya").val() !== "Selectionnez une wilaya...") {
                    $("#wilayaRow .tdrequired label").replaceWith("<label><img src='../../Images/check-mark-md.png' width='20px' height='28px'></img></label>");
            }
            else {
                    $("#wilayaRow .tdrequired label").replaceWith("<label><img src='../../Images/red-wrong-cross-md.png' width='20px' height='28px'></img></label>");
            }
    });

如果必須用圖像替換標簽，則必須將其放在標簽中，以便下次替換。 否則，將找不到label標簽（因為它不再存在），並且也不會被圖像或其他任何東西替代。

還可以使用：

    $("#wilaya").prop("selectedIndex") === 0

作為條件較好。

Answer 2

$("#wilaya").blur(function () {
  $("#wilayaRow .tdrequired").css("color", "#333");
  if ($("#wilaya").val() !== 0) {
    $("#wilayaRow .tdrequired label").replaceWith("<img src='../../Images/check-mark-md.png' width='20px' height='28px'></img>");
  }
  else {
    $("#wilayaRow .tdrequired label").replaceWith("<img src='../../Images/red-wrong-cross-md.png' width='20px' height='28px'></img>");
  }
});

這是jQuery的一部分。

 <table>
  <tr id="wilayaRow">
    <td class="tdtitle">
      <label for="wilaya">Wilaya d'immatriculation</label>
    </td>
    <td class="tdinput">
      <select name="wilaya" id="wilaya">
        <option value="0">Selectionnez une wilaya...</option>
        <option value="1">Khalil</option>
        <option value="2">Moh</option>
      </select>
    </td>
    <td class="tdrequired">
      <label>*</label>
    </td>
  </tr>
</table>

這是html部分。 試用。 我希望這有幫助。