时间戳

首页 > 解决方案 > 切换隐藏/显示不适用于子 div

javascript - 切换隐藏/显示不适用于子 div

问题描述

我有一个脚本，它从 Google 表格中获取数据并将其显示为网页 - 使用 JS 和 Tabletop.js。

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

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

我是 JavaScript 新手 - 在此先感谢！

PS - 我很难写出问题的标题！

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

标签： javascripthtmltabletop.js

解决方案

您页面上的所有条目是否都是从给定的模板填充的，这意味着它们div与类有关entry吗？如果是这样，我认为您的问题如下：您entry div的孩子div患有id="add-info". 当你点击按钮时，你的myFunction()处理函数（但是元素的属性在整个文档中必须是唯一的。参见或的描述。divdocument.getElementById("add-info");divid="add-info"ididgetElementById()

因此，问题的根本原因是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);
});
...

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

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

使用这种方法，我希望您的 DOM 以 s 结束，其中divsid只是数字（"3","4"等），并且您的点击处理程序也应该使用这些作为参数来调用。

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

推荐阅读