Переключить скрыть / показать не работает на div ребенка - PullRequest
Новая
       26

Переключить скрыть / показать не работает на div ребенка

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

У меня есть скрипт, который получает данные из Google Sheet и отображает их как веб-страницу - используя JS и Tabletop.js.

Есть несколько записей на листе, таким образом, несколько записей на веб-странице. Для организации данных у меня есть кнопка скрытия / показа. Когда кнопка нажата на первую запись, она работает. Однако при нажатии любой другой кнопки она скрывает или показывает данные первых записей, а не свои собственные!

Как скрыть / показать данные каждой отдельной записи? Ниже приведен код, с которым я работаю!

Я новичок в JavaScript - Заранее спасибо!

P.S. - Я изо всех сил пытался написать заголовок к вопросам! 

    <link href="../common/cats-copy.css" media="screen" rel="stylesheet" type="text/css" />

  </head>

    <style>
    #add-info {
    display: none
    }
    </style>

  <body>

      <div class="container">
    <h1>Resturants</h1>

    <div id="content"></div>

    <script id="cat-template" type="text/x-handlebars-template">

      <div class="entry">
        <h5>{{establishment_name}}</h5>
        <h6>Area: {{area}}</h6>
        <h6>Cuisine: {{cuisine}}</h6>
          <button id="btn" class="button-primary" onclick="myFunction()">Hide</button>
        <div id="add-info">
        <h6>Address: {{address}}</h6>
        <h6>Google Maps: {{google_maps_location}}</h6>
        <h6>Opening Times: {{opening_times}}</h6>
        <h6>Rating: {{rating}}</h6>
        <h6>Added By: {{added_by}}</h6>
        <h6>Date Added: {{date_added}}</h6>
        </div>
      </div>

    </script>

      </div>

    <!-- Don't need jQuery for Tabletop, but using it for this example -->
    <script type="text/javascript" src="handlebars.js"></script>
    <script type="text/javascript" src="../../src/tabletop.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

      <script type="text/javascript">
      var public_spreadsheet_url = 'https://docs.google.com/spreadsheets/d/1h5zYzEcBIA5zUDc9j4BTs8AcJj-21-ykzq6238CnkWc/edit?usp=sharing';

      $(document).ready( function() {
        Tabletop.init( { key: public_spreadsheet_url,
                         callback: showInfo,
                         parseNumbers: true } );
      });

      function showInfo(data, tabletop) {
        var source   = $("#cat-template").html();
        var template = Handlebars.compile(source);

        $.each( tabletop.sheets("food").all(), function(i, food) {
          var html = template(food);
          $("#content").append(html);
        });
      }

    </script>

      <script>

                function myFunction() {
    var x = document.getElementById("add-info");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
      </script>

  </body>
</html>

1 Ответ

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

Заполнены ли все записи на вашей странице из данного шаблона, то есть они div с классом entry? Если это так, я думаю, что ваша проблема заключается в следующем: у вашего entry div есть ребенок div с id="add-info". И когда вы нажимаете кнопку, ваша функция-обработчик (myFunction()) пытается получить ссылку на этот div через document.getElementById("add-info"); Теперь, если у вас есть несколько таких записей на странице, у вас будет несколько div с id="add-info". Но атрибут id элемента должен быть уникальным во всем документе . См. Описание id или getElementById().

Таким образом, основная причина вашей проблемы заключается в том, что один и тот же id используется в документе несколько раз, когда это не должно быть. Вы получаете поведение, которое видите, потому что getElementById() просто возвращает ссылку на первый элемент, который он находит на странице, независимо от того, какую кнопку вы нажимаете. Но я полагаю, что в этот момент вы находитесь на неопределенной территории поведения.

Одним из способов решения этой проблемы является предоставление myFunction() информации о том, какая кнопка была нажата, при этом каждый div вы хотите манипулировать уникальными, чтобы их было легче найти. Например, вы можете использовать порядок ресторана на своей странице в качестве «индекса» и использовать его как id из div, который вы хотите скрыть / показать. И вы также можете передать этот индекс в качестве аргумента при вызове обработчика кликов: 

...
<button id="btn" class="button-primary" onclick="myFunction('{{index}}')">Hide</button>
<div id="{{index}}">
<!-- The rest of the code here... -->
...

... добавить индекс в контекст вашего шаблона, чтобы Handlebars мог заполнить {{index}} заполнитель: 

...
$.each( tabletop.sheets("food").all(), function(i, food) {
  food.index = i    // Give your context its 'index'
  var html = template(food);
  $("#content").append(html);
});
...

... и затем слегка измените вашу функцию, чтобы использовать заданный аргумент вместо того, чтобы всегда искать div с id="add-info": 

function myFunction(indexToToggle) {
  var x = document.getElementById(indexToToggle);
  // rest of the code is same

При таком подходе я ожидаю, что ваша DOM будет иметь div s, которые имеют id s, которые являются просто числами ("3", "4" и т. Д.), И ваш обработчик кликов должен вызываться с этими в качестве аргументов.

Также обратите внимание, что ваш <button> элемент имеет id="btn". Если вы повторите этот шаблон на своей странице, у вас будет несколько <button> с одним и тем же id. Если вы начнете пытаться получить ссылки на ваши button s через id, у вас будут похожие проблемы с ними, так как id s не будут уникальными.

...