切换 hide/show 不对孩子工作 div

Question

我有一个脚本可以从 Google Sheet 获取数据并将其显示为网页 - 使用 JS 和 Tabletop.js。

Sheet 中有多个条目，因此网页中有多个条目。为了组织数据，我有一个 hide/show 按钮。当在第一个条目上单击按钮时，它会起作用。但是，当单击任何其他按钮时，它会隐藏或显示第一个条目数据，而不是它自己的！

如何hide/show每个单独的条目数据？下面是我正在使用的代码！

我是 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>

Answer 1

您页面上的所有条目是否都是从给定模板填充的，这意味着它们 div 带有 class entry？如果是这样，我认为您的问题如下：您的 entry div 有一个 child div 和 id="add-info"。当您单击该按钮时，您的处理函数 (myFunction()) 会尝试通过 document.getElementById("add-info"); 获取对 div 的引用现在，如果您在一个页面上有多个此类条目，您将拥有多个 div 与 id="add-info"。但是 元素的 id 属性在整个文档中必须是唯一的。请参阅 id or that of getElementById().

的说明

所以您的问题的根本原因是同一个 id 在文档中被多次使用，而这是不应该的。您会得到您所看到的行为，因为 getElementById() 恰好返回对它在页面上找到的第一个元素的引用，而不管您单击哪个按钮。但我相信你在那个时候处于未定义的行为领域。

解决该问题的一种方法是以某种方式提供 myFunction() 有关单击哪个按钮的信息，同时使每个 div 您想要操作的按钮都是唯一的，以便更容易找到它们。例如，您可以将页面上餐厅的订单用作其 "index"，并将其用作您想要 hide/show 的 div 的 id。您还可以在调用点击处理程序时将此索引作为参数传递：

...
<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);
});
...

... 然后稍微改变你的函数以使用给定的参数，而不是总是用 id="add-info":

寻找 div

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

通过这种方法，我希望您的 DOM 最终得到 div，其中 id 只是数字（"3"、"4", 等等）并且您的点击处理程序也应该以这些作为参数被调用。

另请注意，您的 <button> 元素具有 id="btn"。如果您在页面上重复该模板，您将有多个 <button> 具有相同的 id。如果您开始尝试通过 id 获取对 button 的引用，您也会遇到类似的问题，因为 id 不会是唯一的。

切换 hide/show 不对孩子工作 div

Toggle hide/show not working on childs div

html

javascript

tabletop.js