如何在其中切换输入的可见性 <td> 单行标签

Question

I have a LINQ statement that passes multiple records back to the view. For each record I'm generating, I need a clickable button that will toggle the visibility of datefields only for that row. Please see screenshot. First one works properly, but the remaining ones don't; What is better solution that will work for each row return whether its 1 row or 100 rows?

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 answer is great. You could also attach a data -property to your elements to pass data through your click events. If you're repeating these fields via razor, you could assign some sort of ID to the elements that will/should be unique.

 <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();

});

Answer 2

One of the problems you have is multiple same element ids on the page. Id's should be globally unique per page. For DOM selection use class and filter the result collection to the one you want, or make the selector more specific.

If you are generating this in a Razor view, you can put a function on click that passes a reference of itself (the a element) to the function which finds the correct siblings. You are doing minimal DOM traversal then and not connecting many jQuery event triggers on load.

Something like this (but not making the function a global) should do it:

<tr>
  ...
  <td>
    <a href="#" onclick="toggleRow(this, 'add');">text</a>
    <a href="#" onclick="toggleRow(this, 'delete');">text</a>
  </td>
    ...
  <td class="date-field">
    ...
  </td>
  <td class="date-field">
    ...
  </td>
  ... 
</tr>

function toggleRow(a, state)
{
  var a = $(a);
  var td = a.closest('td');
  // toggle the date selectors
  a.closest('td').siblings('.date-field').find('> div').toggle();

  var tr = a.closest('tr');
  // toggle the checkboxs on right of row
  tr.find('a.saveBtn').toggle();
  tr.find('a.canelBtn').toggle();

  // toggle the a elements that trigger this event
  var selector = (state == 'add') ? ':first' : ':last';
  td.find('a' + selector).toggle();      
}

If you don't like the onclick idea, you can still connect your jQuery event handlers and perform similar logic based on the event.currentTarget (being the a element) in the jQuery click event handler. You would still need some small changes to your HTML to identify the a elements (+, -) by class and you could use the data-on/off to decide which one was clicked, and the jQuery JS would be very similar to the code above.

EDIT
The code above is a little nasty IMO and prone to easy breakage. With some small changes to your HTML, the code could be much simpler and won't break if you start moving element around within their parent elements:

Changes to your HTML

<!-- add classes to the a tags -->
<a id="actionOnUserButton" class="toggle-show" 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" class="toggle-hide" 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>

<!-- wrapped the a tags in the .input-group div -->
<td>
  <div class="input-group">
    <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>
  </div>
</td>

try this code

$(function()
{    
  function toggleControls(elem, toggler)
  {    
    // hide the button that fired the event
    var a = $(elem).hide();

    // hide or show the controls
    var func = (toggler == 'hide') ? 'hide' : 'show'; 
    // the line above is not essential but decouples the css class from the jQuery function name
    a.closest('tr').find('.input-group')[func]();

    // show the opposite button so it can be clicked to reverse the hide/show state
    var selector = (toggler == 'hide') ? 'show' : 'hide';
    a.closest('td').find('.toggle-' + selector).show();
  }

  $('a.toggle-hide').on('click', function()
  {
    toggleControls(this, 'hide');
  });

  $('a.toggle-show').on('click', function()
  {
    toggleControls(this, 'show');
  });

  // initially hide the controls, this would be better done with CSS on page load so the row doesn't show then hide on slow connections 
  $('a.toggle-hide').click();
});