Блог

Главная - Вопросы по программированию - Закрыть всплывающее окно при повторном нажатии

Закрыть всплывающее окно при повторном нажатии

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Итак, я создал эту таблицу, которая открывает всплывающее окно, отображающее информацию, когда вы нажимаете td. Каждый td отображает различную информацию во всплывающем окне.

Что работает: когда я нажимаю на td, он скрывает любое открытое всплывающее окно и открывает новое всплывающее окно, соответствующее этому td.

Что не работает: я хочу сделать так, чтобы при а) нажатии на тд, всплывающее окно которого отображается, оно скрывало всплывающее окно (ну, делает его display == none), б) щелчок за пределами таблицы скрывал любое открытое всплывающее окно.

Вот моя попытка кода.

 window.onload = function() {

  $('#myTable').on('click', 'td', function() {

    $('.spanClass').html('');
    $('.spanClass').css("display", "none")


    var $tr = $(this).parent('tr');
    var firstCell = $tr.find("td:first").text();
    var didIt = (this.innerText - firstCell);


    //this is me attempting to close the popup if you click on the same td again, but open it if it's not currently open. 
    if ($(this).find(".spanClass").css("display") == 'block') {
      $(this).find(".spanClass").css("display", "none");
    } else {
      $(this).find('.spanClass').html(didIt);
      $(this).find(".spanClass").css("background-color", "#555");
      $(this).find(".spanClass").css("display", "block");
    }
    //this is me attempting to close the popup when I click outside the table.
    if (e.target.id != 'myTable') {
      $(".spanClass").css("display", "none");
    }

  });
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
  <tr>
    <th>Head Row</th>
    <th>One</th>
    <th>Two</th>
    <th>Three</th>
    <th>Four</th>
    <th>Five</th>
  </tr>
  <tr>
    <th>Title 1</th>
    <td>10</td>
    <td>9<span class="spanClass"></span></td>
    <td>5<span class="spanClass"></span></td>
    <td>3<span class="spanClass"></span></td>
    <td>2<span class="spanClass"></span></td>
    <td>1<span class="spanClass"></span></td>
  </tr>
  <tr>
    <th>Title 2</th>
    <td>25<span class="spanClass"></span></td>
    <td>19<span class="spanClass"></span></td>
    <td>16<span class="spanClass"></span></td>
    <td>15<span class="spanClass"></span></td>
    <td>10<span class="spanClass"></span></td>
    <td>2<span class="spanClass"></span></td>
  </tr>
  <tr>
    <th>Title 3</th>
    <td>100</td>
    <td>50<span class="spanClass"></span></td>
    <td>25<span class="spanClass"></span></td>
    <td>15<span class="spanClass"></span></td>
    <td>10<span class="spanClass"></span></td>
    <td>5<span class="spanClass"></span></td>
  </tr>


</table>

Вот мой codepen:

https://codepen.io/jackcode1/pen/ZEpbRQq

Комментарии:

1. Две проблемы; 1. Переданная функция on должна принимать e в качестве аргумента. 2. e.target.id почти всегда будет != "myTable" , потому что практически невозможно щелкнуть по элементу таблицы, не нажав сначала на td элемент или th или tr или tbody . Ваш обработчик события щелчка предназначен для #myTable того, чтобы щелчок вне таблицы не вызывал этот обработчик. Добавьте другой обработчик body или что-то e.target.closest('#myTable') == null в этом роде, проверьте и скройте, если это правда.

2. Хм, это все еще не работает.

3. Это то, что я пробовал: window.onload = function() { if($(document).on("click")) { if (event.target.closest("myTable") == null) { $('.spanClass').css("display", "none") } }; }

4. Хорошо, я разобрался с одной проблемой. В основном обходной путь. Но мне все равно нужно, чтобы всплывающее окно закрывалось при повторном нажатии на тот же td. Любые мысли по этому поводу @HereticMonkey

Ответ №1:

 window.onload = function() {

  $('#myTable').on('click', 'td', function(e) {
  
    e.stopPropagation();

    $('.spanClass').html('');
    $('.spanClass').css("display", "none")


    var $tr = $(this).parent('tr');
    var firstCell = $tr.find("td:first").text();
    var didIt = (this.innerText - firstCell);


    //this is me attempting to close the popup if you click on the same td again, but open it if it's not currently open. 
    if ($(this).find(".spanClass").css("display") == 'block') {
      $(this).find(".spanClass").css("display", "none");
    } else {
      $(this).find('.spanClass').html(didIt);
      $(this).find(".spanClass").css("background-color", "#555");
      $(this).find(".spanClass").css("display", "block");
    }
    //this is me attempting to close the popup when I click outside the table.
    

  });
  
   $("body").click(function(e){
   
    if (e.target.id != 'myTable') {
      $(".spanClass").css("display", "none");
    }
  });
  
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
  <tr>
    <th>Head Row</th>
    <th>One</th>
    <th>Two</th>
    <th>Three</th>
    <th>Four</th>
    <th>Five</th>
  </tr>
  <tr>
    <th>Title 1</th>
    <td>10</td>
    <td>9<span class="spanClass"></span></td>
    <td>5<span class="spanClass"></span></td>
    <td>3<span class="spanClass"></span></td>
    <td>2<span class="spanClass"></span></td>
    <td>1<span class="spanClass"></span></td>
  </tr>
  <tr>
    <th>Title 2</th>
    <td>25<span class="spanClass"></span></td>
    <td>19<span class="spanClass"></span></td>
    <td>16<span class="spanClass"></span></td>
    <td>15<span class="spanClass"></span></td>
    <td>10<span class="spanClass"></span></td>
    <td>2<span class="spanClass"></span></td>
  </tr>
  <tr>
    <th>Title 3</th>
    <td>100</td>
    <td>50<span class="spanClass"></span></td>
    <td>25<span class="spanClass"></span></td>
    <td>15<span class="spanClass"></span></td>
    <td>10<span class="spanClass"></span></td>
    <td>5<span class="spanClass"></span></td>
  </tr>


</table>

Комментарии:

1. Спасибо, DCR. Он по-прежнему не работает, когда я дважды нажимаю на один и тот же td. я хочу, чтобы оно открывалось, если я нажимаю на td, но затем исчезает, если я снова нажимаю на тот же td. Есть мысли?

2. посмотрите на использование toggle ()

Ответ №2:

как насчет этого. использование щелчка вдали от таблицы — это первая функция, щелчок по таблице — вторая. Я использую фильтр not, чтобы исключить тот, на который вы нажимаете, и переключить его.

вот ручка. https://codepen.io/pollywog/pen/zYKrdma

 window.onload = function() { 
    $('body').on('click', function(e) {
      if(!$(e.target).closest('#myTable').length){
        $('.spanClass').html('');
        $('.spanClass').hide();
      }
    });
   
      $('body').on('click', 'td', function() {
         const firstCell = $(this).closest('tr').find("td:first").text();
         const innerText = $(this).text();
         const didIt = (innerText - firstCell);
         const thisSpanClass = $(this).find('.spanClass');
        $('.spanClass').not(thisSpanClass).html('');
        $('.spanClass').not(thisSpanClass).hide();
        thisSpanClass.html(didIt);
        thisSpanClass.css("background-color", "#555");
        thisSpanClass.toggle();
      });
    }