Question

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

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

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

我是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类的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的{{1}}。您还可以在调用点击处理程序时将此索引作为参数传递：

div

...将索引添加到模板上下文中，以便... <button id="btn" class="button-primary" onclick="myFunction('{{index}}')">Hide</button> <div id="{{index}}">  ...可以填充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"

通过这种方法，我希望您的DOM最终以function myFunction(indexToToggle) { var x = document.getElementById(indexToToggle); // rest of the code is same的{{1}}只是数字（div，id等）和您的点击处理程序也应该以这些参数作为参数来调用。

还要注意，您的"3"元素具有"4"。如果您在页面上重复该模板，则将有多个<button>和相同的id="btn"。如果您开始尝试通过<button>获取对id的引用，那么由于button不会唯一，您也会遇到类似的问题。

切换隐藏/显示不适用于child div

1 个答案: