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

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

Вот моя рабочий пример: 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.info($(this).attr('data-value'));
      }
    },
    "a.chooseme", null);
});

CSS

td.sel-value {
  display: none;
}

jquery toggle show-hide

12.09.2018 19:33

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто добавьте код для сброса в том же событии клика. И удалите selectme из селектора событий щелчка.

 $("#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.info($(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/

Спасибо--

12.09.2018 20:29