Показать / Скрыть переключатель с помощью jQuery - PullRequest
Новая
       26

Показать / Скрыть переключатель с помощью jQuery

0 голосов
/ 12 сентября 2018

В моем примере я пытаюсь выбрать значение и показать выбранный текст «значение # выбрано».Это работает, однако мне нужно повторно показать прежний элемент после нажатия на ссылку «Сброс», которая отображается после нажатия «Выбрать меня» ...

Вот моя скрипка: 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;
}

1 Ответ

0 голосов
/ 12 сентября 2018

Просто добавьте код для сброса в том же событии клика.И удалите 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/

Спасибо--

...