Question

我正试图将我的内容从我的谷歌电子表格中带入把手，以便在我可以显示/隐藏的标签中。当您单击该链接时，它会显示一个内容面板并隐藏另一个内容面板。我有把手从两个谷歌电子表格中提取内容，但当我添加尝试做隐藏/显示面板时，它不起作用。我曾经一度出现过隐藏/展示面板但没有来自车把的内容。

这是我的小提琴：http://jsfiddle.net/justawebbie/AcW97/17/

以下是javascript部分：

   function toggle_visibility(id) {
      var e = document.getElementById(id);
        if(e.style.display == 'block')
          e.style.display = 'none';
            else
          e.style.display = 'block';
    }


// Define spreadsheet URL.
   var mySpreadsheet = 'https://docs.google.com/spreadsheet/ccc?key=0AjlSK7_zXoNHdEoyWDYxb3hnZi1xWkl1TVQ0eERBQ2c#gid=0';
   var mySpreadsheet2='https://docs.google.com/spreadsheet/ccc?key=0AjlSK7_zXoNHdEpYUEg0VTJ0Rlpzb2RUOVZfLU5oX0E#gid=0'

// Compile the Handlebars template for HR leaders.
   var HRTemplate = Handlebars.compile($('#hr-template').html());
   var HRTemplate3 = Handlebars.compile($('#hr-template3').html());
// Load top five HR leaders.
    $('#hr').sheetrock({
       url: mySpreadsheet,
       sql: "select A,B,C,N,M,O where B contains 'yes' order by A desc",
       headersOff: true,
       headers: 2,
       rowHandler: HRTemplate
    });
    $('#hr3').sheetrock({
       url: mySpreadsheet2,
       sql: "select A,C,D,E order by A desc",
       headersOff: true,
       headers: 2,
       rowHandler: HRTemplate3
    });

HTML部分：

    <ul>
       <li><a href="#" onclick="toggle_visibility('sec1');">Certificates</a></li>
       <li><a href="#" onclick="toggle_visibility('sec2');">Minors</a></li>
    </ul>
    <div id="sec1" style="background-color:pink;">
         <div id="hr" class="table">
            <script id="hr-template" type="text/x-handlebars-template">
             <div id='table-row'>
                       <div id='first-cell'><a href='{{cells.N}}' class='left-link'>{{cells.A}}</a></div>
               <div id='second-cell'><a href='{{cells.O}}' class='right-link'>{{cells.M}}</a></div>
                </script>
           </div>
     </div>  
     <div id="sec2" style="background-color:#eee;"> 
          <div id="hr3" class="table">
           <script id="hr-template3" type="text/x-handlebars-template">
            <div id='table-row'>
                        <div id='first-cell'><a href='{{cells.D}}' class='left-link'>{{cells.A}}</a></div>
                <div id='second-cell'><a href='{{cells.E}}' class='right-link'>{{cells.C}}</a></div>
                     </div>
               </script>
           </div>
      </div>

Answer 1

Fiddler似乎在加载库时出现问题，但是当我在本地构建页面时，它可以正常工作。试试这个zip文件，看看你是否还有任何问题。

http://cris.lc/qtpzm

Handlebars.js和谷歌电子表格显示/隐藏内容

1 个答案: