使用 jQuery 显示/隐藏切换答案

【问题标题】：Show/Hide toggle using jQuery使用 jQuery 显示/隐藏切换
【发布时间】：2018-09-12 17:33:13
【问题描述】：

在我的示例中，我尝试选择一个值并显示所选文本“value # selected”。这可行，但是，我需要在单击“选择我”后显示的“重置”链接后重新显示前一个元素...

这是我的小提琴：http://jsfiddle.net/samjco/wG8qf/566/

HTML：

  <table id="main" border="1">
      <tr>
        <td class="value-entity">
          <div>Value 1 <a href="#" class="chooseme" data-value="Value 1">Choose Me</a></div>
          <div>Value 2 <a href="#" class="chooseme" data-value="Value 2">Choose Me</a></div>
        </td>
        <td class="sel-value"></td>
      </tr>

      <tr>
        <td>Something Unrelated</td>
      </tr>

      <tr>
        <td class="value-entity">
          <div>Value 3 <a href="#" class="chooseme" data-value="Value 3">Choose Me</a></div>
        </td>
        <td class="sel-value"></td>
      </tr>

      <tr>
        <td>Something else Unrelated</td>
      </tr>

    </table>

$(function() {
  $("#main").on({
      'click': function(event) {
        event.preventDefault();
        var Data = $(this).attr('data-value');
        var Value = '<div class="sel-value-text">'+ Data +' was selected </div><a href="#" class="show-value-entity">Reset</a>';

        $(this).closest("td.value-entity").nextUntil("td.value-entity").show().html(Value);
        $(this).parents("td.value-entity").hide();
         //alert($(this).attr('data-value'));
         console.log($(this).attr('data-value'));
      }
    },
    "a.chooseme", null);
});

CSS

td.sel-value {
  display: none;
}

【问题讨论】：

标签： jquery toggle show-hide

【解决方案1】：

只需在同一点击事件中添加重置代码即可。并从 click 事件选择器中移除 chooseme。

 $("#main").on({
      'click': function(event) {
        ...
        ...
      }
    },
    "a", null);

以下是片段

$(function() {
  $("#main").on({
      'click': function(event) {
        event.preventDefault();
        if($(this).hasClass("chooseme")){
        var Data = $(this).attr('data-value');
        var Value = '<div class="sel-value-text">'+ Data +' was selected </div><a href="#" class="show-value-entity reset">Reset</a>';
        
        $(this).closest("td.value-entity").nextUntil("td.value-entity").show().html(Value);
        $(this).parents("td.value-entity").hide();
         console.log($(this).attr('data-value'));
         }else{
        	event.preventDefault();
        
        $(this).parents("td.sel-value").parent().find(".value-entity").show();
        $(this).parents("td.sel-value").hide();
        }
      }
    },
    "a", null);
    
});

td.sel-value {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main" border="1">
  <tr>
    <td class="value-entity">
      <div>Value 1 <a href="#" class="chooseme" data-value="Value 1">Choose Me</a></div>
      <div>Value 2 <a href="#" class="chooseme" data-value="Value 2">Choose Me</a></div>
    </td>
    <td class="sel-value"></td>
  </tr>
  
  <tr>
    <td>Something Unrelated</td>
  </tr>
  
  <tr>
    <td class="value-entity">
      <div>Value 3 <a href="#" class="chooseme" data-value="Value 3">Choose Me</a></div>
    </td>
    <td class="sel-value"></td>
  </tr>
  
  <tr>
    <td>Something else Unrelated</td>
  </tr>
  
</table>

您也可以在 JSFiddle 上对其进行测试..

http://jsfiddle.net/nimittshah/wG8qf/591/

谢谢--

【讨论】：