javascript - 根据文本输入显示/隐藏星号

Question

我有一个 PHP 表单，我试图在输入框 txt1、txt1 和 txt3 之后显示星号(如果它们是)空的。如果在点击提交按钮后为空，它会显示星号，但如果该字段已被填充，我希望能够在点击按钮后删除星号。下面的代码似乎没有做最后一点。

//variable declaration
var a = $("#txt1").val(),
        b = $('#txt2').val(),
        c = $("#txt3").val();
function asterisks() {
    if (a == ""){
        document.getElementById("err_txt1").innerHTML = "*";
    }
    else if (a != ""){
        document.getElementById("err_txt1").innerHTML = "";
    }
    if (b == ""){
        document.getElementById("err_txt2").innerHTML = "*";
    }
    else if (b != ""){
        document.getElementById("err_txt2").innerHTML = "";
    }
    if (c == ""){
        document.getElementById("err_txt3").innerHTML = "*";
    }
    else if (c != ""){
        document.getElementById("err_txt3").innerHTML = "";
    }
}

我错过了什么？有更好的方法吗？是否可以在字段填满后立即删除星号而无需按下按钮？如果是，如何？

示例字段 HTML

<style>
    .err {
        color: #FF0000;
    }
</style>

<td><h3>Subject</h3></td>
<td><b id="err_txt1" class="err"></b><input type="text" id="txt1" name="txt1" placeholder="Subject" >
</td>

提交表单

$("#form1").submit(function(e){
    e.preventDefault();
    asterisks();
}

Answer 1

你可以像这样简单地做到这一点:

function asterisks() {
  $("input[id^=txt]").each(function() {
    var id = $(this).attr("id").replace("txt", "");
    $("#err_txt" + id).text(($(this).val() ? "*" : ""))
  });
};

让我们分解input[id^=txt]:

input = 很清楚，输入元素的选择器。id^=txt 这意味着我们将选择所有 id 以 (^=) txt 开头的元素

演示

function asterisks() {
  $("input[id^=txt]").each(function() {
    var id = $(this).attr("id").replace("txt", "");
    $("#err_txt" + id).text(($(this).val() ? "*" : ""))
  });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txt1" value="*" /><label id="err_txt1"></label>
<input id="txt2" value="" /><label id="err_txt2"></label>
<input id="txt3" value="*" /><label id="err_txt3"></label>






<input type='submit' onclick='asterisks()' id="btnsub" name="btnsub" value="Submit">

演示 2

$("#form1").submit(function(e) {
  e.preventDefault();
  asterisks();
})

function asterisks() {
  $("input[id^=txt]").each(function() {
    var id = $(this).attr("id").replace("txt", "");
    $("#err_txt" + id).html(($(this).val().length == 0 ? "*" : ""))
  });
};

.err {
  color: #FF0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
  <table>
    <tr>
      <td>
        <h3>Subject</h3>
      </td>
      <td><b id="err_txt1" class="err"></b><input type="text" id="txt1" name="txt1" placeholder="Subject">
      </td>
    </tr>
    <tr>
      <td>
        <h3>Subject</h3>
      </td>
      <td><b id="err_txt2" class="err"></b><input type="text" id="txt2" name="txt1" placeholder="Subject">
      </td>
    </tr>
    <tr>
      <td>
        <h3>Subject</h3>
      </td>
      <td><b id="err_txt3" class="err"></b><input type="text" id="txt3" name="txt1" placeholder="Subject">
      </td>
    </tr>
  </table>
  <input type='submit' id="btnsub" name="btnsub" value="Submit">
</form>