javascript - 如何切换单行 <td> 标记内输入的可见性

Question

我有一个 LINQ 语句，它将多个记录传递回 View 。对于我生成的每条记录，我需要一个可单击的按钮，该按钮将仅切换该行的日期字段的可见性。请看截图。第一个可以正常工作，但其余的则不能；对于每行返回(无论是 1 行还是 100 行)，什么是更好的解决方案？

Razor /Html

<td>
  <a id="actionOnUserButton" class="toggle" type="checkbox" data-toggle="toggle" data-on="Cancel" data-off="Set Exception" href="#" title="Show exclusion dates"><span id="userActionSpan" class="actionBtn GlyphSize glyphicon glyphicon-plus-sign"></span></a>
  <a id="actionOnUserButton2" type="checkbox" data-toggle="toggle" data-on="Cancel" data-off="Set Exception" href="#" title="Hide exclusion dates"><span id="userActionSpan" class="GlyphSize glyphicon glyphicon-minus-sign"></span></a>
</td>
<td id="StartDateField">
  <div class="input-group">
    <span title="Select Start Date" class="input-group-addon" id="basic-addon1"><a class="glyphicon glyphicon-calendar"></a></span> @Html.EditorFor(modelItem => x.StartDate, "", new { htmlAttributes = new { @class = "form-control datepicker", @id = "UStartDateField",
    @style = "width:120px" } })
  </div>
</td>
<td id="EndDateField">
  <div class="input-group">
    <span title="Select End Date" class="input-group-addon" id="basic-addon1"><a class="glyphicon glyphicon-calendar"></a></span> @Html.EditorFor(modelItem => x.EndDate, "", new { htmlAttributes = new { @class = "form-control datepicker", @id = "UEndDateField",
    @style = "width:120px" } })
  </div>
</td>
<td>
  <a id="actionOnUserButtonSave" type="checkbox" data-toggle="toggle" data-on="Cancel" data-off="Set Exception" href="#" title="Save changes" class="saveBtn"><span id="userActionSpan" class="GlyphSize glyphicon glyphicon-ok-sign green"></span></a>
  <a id="actionOnUserButtonCancel" type="checkbox" data-toggle="toggle" data-on="Cancel" data-off="Set Exception" href="#" title="Cancel changes" class="canelBtn"><span id="userActionSpan" class="GlyphSize glyphicon glyphicon-remove-sign red"></span></a>
</td>
</tr>
<td>
  <a id="actionOnUserButton" class="toggle" type="checkbox" data-toggle="toggle" data-on="Cancel" data-off="Set Exception" href="#" title="Show exclusion dates"><span id="userActionSpan" class="actionBtn GlyphSize glyphicon glyphicon-plus-sign"></span></a>
  <a id="actionOnUserButton2" type="checkbox" data-toggle="toggle" data-on="Cancel" data-off="Set Exception" href="#" title="Hide exclusion dates"><span id="userActionSpan" class="GlyphSize glyphicon glyphicon-minus-sign"></span></a>
</td>
<td id="StartDateField">
  <div class="input-group">
    <span title="Select Start Date" class="input-group-addon" id="basic-addon1"><a class="glyphicon glyphicon-calendar"></a></span> @Html.EditorFor(modelItem => x.StartDate, "", new { htmlAttributes = new { @class = "form-control datepicker", @id = "UStartDateField",
    @style = "width:120px" } })
  </div>
</td>
<td id="EndDateField">
  <div class="input-group">
    <span title="Select End Date" class="input-group-addon" id="basic-addon1"><a class="glyphicon glyphicon-calendar"></a></span> @Html.EditorFor(modelItem => x.EndDate, "", new { htmlAttributes = new { @class = "form-control datepicker", @id = "UEndDateField",
    @style = "width:120px" } })
  </div>
</td>
<td>
  <a id="actionOnUserButtonSave" type="checkbox" data-toggle="toggle" data-on="Cancel" data-off="Set Exception" href="#" title="Save changes" class="saveBtn"><span id="userActionSpan" class="GlyphSize glyphicon glyphicon-ok-sign green"></span></a>
  <a id="actionOnUserButtonCancel" type="checkbox" data-toggle="toggle" data-on="Cancel" data-off="Set Exception" href="#" title="Cancel changes" class="canelBtn"><span id="userActionSpan" class="GlyphSize glyphicon glyphicon-remove-sign red"></span></a>
</td>
</tr>

Jquery:

$(document).ready(
   function () {
       $("#StartDateHeader").hide()
       $("#EndDateHeader").hide()
       $("#StartDateField").hide()
       $("#EndDateField").hide()
       $('#actionOnUserButton2').hide()
       $("#actionOnUserButtonCancel").hide()
       $("#actionOnUserButtonSave").hide()
   });

  $("#actionOnUserButton").on('click', function () {


    if ($('#StartDateHeader').not(':visible')) {
        //Show the date headers
        $("#StartDateHeader").show()
        $("#EndDateHeader").show()
        $("#StartDateField").show()
        $("#EndDateField").show()
        $('#actionOnUserButton2').show()
        $('#actionOnUserButton').hide()
        $("#actionOnUserButtonCancel").show()
        $("#actionOnUserButtonSave").show()
    }
});

$("#actionOnUserButton2").on('click', function () {
    if ($('#StartDateHeader').is(':visible')) {

        $("#StartDateHeader").hide()
        $("#EndDateHeader").hide()
        $("#StartDateField").hide().val('')
        $("#EndDateField").hide()
        $('#actionOnUserButton2').hide()
        $("#actionOnUserButtonCancel").hide()
        $("#actionOnUserButtonSave").hide()
        $('#actionOnUserButton').show()
    }
});

Answer 1

@click2install 的答案很棒。您还可以将 data 属性附加到元素，以通过单击事件传递数据。如果您通过 razor 重复这些字段，您可以为将/应该是唯一的元素分配某种 ID。

 <td> <a class="btn btn-sm btn-success hidestuff" href="#" id="@Model.RandomId" data-randomid="@Model.RandomId"> </td>

$('.hidestuff').click(function () {

    var elemId = $(this).data('randomid');
//With this you have a reference to the actual element clicked, even though 
it's a razor generated value.
 $('#'+elemId).hide();

});