Question

我正在尝试在页面顶部放置一个标签，用户可以点击该标签隐藏标签，并显示文本框。但是，我无法让它发挥作用。

剃刀代码：

<div class="form-group">
    <div class="col-md-10">
        @Html.DisplayFor(model => model.Name, new { id = "Name" })
        @Html.EditorFor(model => model.Name, new {htmlAttributes = new {@class = "form-control", id = "NameTextBox"}})
        @Html.ValidationMessageFor(model => model.Name, "", new { id = "NameTexBoxValidator" })
    </div>
</div>

jQuery的：

$("#Name").click(function setCompleteStatus() {
    if ($("#Name").is(":visible")) {
        $("#NameTextBox").hide();
    } else {
        $("#Name").show();
    }
});

Answer 1

代码不太清楚，但我可以尝试一下，这段代码会隐藏标签onclick并按照你的要求显示textBox。

$("#Name").click(function() {
    if ($("#Name").is(":visible")) {
      $("#NameTextBox").show();
      $("#Name").hide();
    }
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <label id="Name" for="male">Male</label>
  <input id="NameTextBox" type="text" style="display:none;">
</form>

Answer 2

试试这个，

$("#Name").click(function(){
    if ($("#Name").is(":visible")) {
        $("#NameTextBox").show();
        $("#Name").hide();
    } else { // I'd added this else block for discussion purposes only
        $("#NameTextBox").hide();
        $("#Name").show();
   }
});

这将在点击标签时显示文本框和隐藏标签。 else部分无法访问，因为在标签被隐藏后，无法再次触发此事件（基于给定的代码）

编辑：

 @Html.ValidationMessageFor(model => model.Name, "", new { id = "NameTexBoxValidator" })

Answer 3

我改变了@Html.DisplayFor(model => model.Name, new { id = "Name" }) 到@Html.Label(Model.Name, new { id = "Name" })并且它有效。

单击标签以显示texbox

3 个答案: