Show/Hide 使用 jQuery 切换

Question

在我的示例中，我尝试选择一个值并显示所选文本 "value # selected"。这有效，但是，我需要在单击 link "Reset" 后重新显示前一个元素，后者在单击 "Choose Me" 后显示...

这是我的fiddle：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>

JS

$(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;
}

Answer 1

只需在同一个点击事件中添加一个重置代码即可。并从点击事件选择器中删除 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/

谢谢--

Show/Hide 使用 jQuery 切换

Show/Hide toggle using jQuery

jquery

toggle

show-hide