jQuery插件listnav无法正常工作

我正在使用listNav来从我的数据库中按字母顺序排列数据。如果我将我的列表硬编码到HTML页面，插件就像一个魅力。问题在于数据库有超过2500个条目，并且它们会不断增长，因此每次更新时都要花费时间对输入进行硬编码。jQuery插件listnav无法正常工作

我正在使用Javascript来读取json文件并创建将打印到页面中的输出。输出工作正常，问题不在那里。问题是，当我从.js文件的输出到我的html页面时，该插件不能识别filterSelector并且它不显示按字母顺序的导航。我不确定为什么，因为它与输出到页面中的硬编码相同。

这是我layout.js文件

$(document).ready(function() { 
    var collection = ""; 
    var obj = []; 
    var html = ''; 
    var html2 = ''; 
    var html3 = ''; 
    $.getJSON("getDBData.php", function(data) { 
     var num = 1; 
     var json = JSON.stringify(data); 
     /* Here I get the information from the DB. No issues here*/ 
     } 
     html2 += '   <span id ="type_span" class="bronze">'; 
     html2 += '    <span class="company_name"><h2><a href="#">Beverly Crusher</a></h2></span>'; 
     html2 += '    <p hidden class="last-name">Crusher</p>  <br />'; 
     html2 += '    <span ><strong>Rank:</strong>&nbsp;</span><span>Commander</span>  <br />'; 
     html2 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>Oct. 13, 2324</span>  <br />'; 
     html2 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
     html2 += '   </span>'; 
     html2 += '   <span id ="type_span" class="bronze">'; 
     html2 += '    <span class="company_name"><h2><a href="#">Wesley Crusher</a></h2></span>'; 
     html2 += '    <p hidden class="last-name">Crusher</p>  <br />'; 
     html2 += '    <span ><strong></strong>&nbsp;</span><span>Ensign</span>  <br />'; 
     html2 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>July 29, 2349</span>  <br />'; 
     html2 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
     html2 += '   </span>'; 
     html2 += '   <span id ="type_span" class="bronze">'; 
     html2 += '    <span class="company_name"><h2><a href="#">Data</a></h2></span>'; 
     html2 += '    <p hidden class="last-name">Data</p>  <br />'; 
     html2 += '    <span ><strong></strong>&nbsp;</span><span>Lieutenant Commander</span>  <br />'; 
     html2 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>Feb. 2, 2338</span>  <br />'; 
     html2 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
     html2 += '   </span>'; 
     html2 += '   <span id ="type_span" class="bronze">'; 
     html2 += '    <span class="company_name"><h2><a href="#">Geordi La Forge</a></h2></span>'; 
     html2 += '    <p hidden class="last-name">La Forge</p>  <br />'; 
     html2 += '    <span ><strong></strong>&nbsp;</span><span>Commander</span>  <br />'; 
     html2 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>Feb. 16, 2335</span>  <br />'; 
     html2 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
     html2 += '   </span>'; 
     html2 += '   <span id ="type_span" class="bronze">'; 
     html2 += '    <span class="company_name"><h2><a href="#">Jean Luc Picard</a></h2></span>'; 
     html2 += '    <p hidden class="last-name">Picard</p>  <br />'; 
     html2 += '    <span ><strong></strong>&nbsp;</span><span>Captain</span>  <br />'; 
     html2 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>July 13, 2305</span>  <br />'; 
     html2 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
     html2 += '   </span>'; 
     html2 += '   <span id ="type_span" class="bronze">'; 
     html2 += '    <span class="company_name"><h2><a href="#">William Riker</a></h2></span>'; 
     html2 += '    <p hidden class="last-name">Riker</p>  <br />'; 
     html2 += '    <span ><strong></strong>&nbsp;</span><span>Captain</span>  <br />'; 
     html2 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>August 19, 2335</span>  <br />'; 
     html2 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
     html2 += '   </span>'; 
     html2 += '   <span id ="type_span" class="bronze">'; 
     html2 += '    <span class="company_name"><h2><a href="#">Deanna Troi</a></h2></span>'; 
     html2 += '    <p hidden class="last-name">Troi</p>  <br />'; 
     html2 += '    <span ><strong></strong>&nbsp;</span><span>Commander</span>  <br />'; 
     html2 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>March 29, 2336 (Terran equivalent)</span>  <br />'; 
     html2 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
     html2 += '   </span>'; 
     html2 += '   <span id ="type_span" class="bronze">'; 
     html2 += '    <span class="company_name"><h2><a href="#">Worf</a></h2></span>'; 
     html2 += '    <p hidden class="last-name">Worf</p>  <br />'; 
     html2 += '    <span ><strong></strong>&nbsp;</span><span>Lieutenant Commander</span>  <br />'; 
     html2 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>December 9, 2340 (Terran equivalent)</span>  <br />'; 
     html2 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
     html2 += '   </span>'; 
    } 
//  console.log(typeof(html2)); 
//  console.log(html2); 
//  $('.dbOutput').html(html2); 
}); 
html3 += '   <span id ="type_span" class="bronze">'; 
html3 += '    <span class="company_name"><h2><a href="#">Beverly Crusher</a></h2></span>'; 
html3 += '    <p hidden class="last-name">Crusher</p>  <br />'; 
html3 += '    <span ><strong>Rank:</strong>&nbsp;</span><span>Commander</span>  <br />'; 
html3 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>Oct. 13, 2324</span>  <br />'; 
html3 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
html3 += '   </span>'; 
html3 += '   <span id ="type_span" class="bronze">'; 
html3 += '    <span class="company_name"><h2><a href="#">Wesley Crusher</a></h2></span>'; 
html3 += '    <p hidden class="last-name">Crusher</p>  <br />'; 
html3 += '    <span ><strong></strong>&nbsp;</span><span>Ensign</span>  <br />'; 
html3 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>July 29, 2349</span>  <br />'; 
html3 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
html3 += '   </span>'; 
html3 += '   <span id ="type_span" class="bronze">'; 
html3 += '    <span class="company_name"><h2><a href="#">Data</a></h2></span>'; 
html3 += '    <p hidden class="last-name">Data</p>  <br />'; 
html3 += '    <span ><strong></strong>&nbsp;</span><span>Lieutenant Commander</span>  <br />'; 
html3 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>Feb. 2, 2338</span>  <br />'; 
html3 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
html3 += '   </span>'; 
html3 += '   <span id ="type_span" class="bronze">'; 
html3 += '    <span class="company_name"><h2><a href="#">Geordi La Forge</a></h2></span>'; 
html3 += '    <p hidden class="last-name">La Forge</p>  <br />'; 
html3 += '    <span ><strong></strong>&nbsp;</span><span>Commander</span>  <br />'; 
html3 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>Feb. 16, 2335</span>  <br />'; 
html3 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
html3 += '   </span>'; 
html3 += '   <span id ="type_span" class="bronze">'; 
html3 += '    <span class="company_name"><h2><a href="#">Jean Luc Picard</a></h2></span>'; 
html3 += '    <p hidden class="last-name">Picard</p>  <br />'; 
html3 += '    <span ><strong></strong>&nbsp;</span><span>Captain</span>  <br />'; 
html3 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>July 13, 2305</span>  <br />'; 
html3 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
html3 += '   </span>'; 
html3 += '   <span id ="type_span" class="bronze">'; 
html3 += '    <span class="company_name"><h2><a href="#">William Riker</a></h2></span>'; 
html3 += '    <p hidden class="last-name">Riker</p>  <br />'; 
html3 += '    <span ><strong></strong>&nbsp;</span><span>Captain</span>  <br />'; 
html3 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>August 19, 2335</span>  <br />'; 
html3 += '    <a class ="db_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
html3 += '   </span>'; 
html3 += '   <span id ="type_span" class="bronze">'; 
html3 += '    <span class="company_name"><h2><a href="#">Deanna Troi</a></h2></span>'; 
html3 += '    <p hidden class="last-name">Troi</p>  <br />'; 
html3 += '    <span ><strong></strong>&nbsp;</span><span>Commander</span>  <br />'; 
html3 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>March 29, 2336 (Terran equivalent)</span>  <br />'; 
html3 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
html3 += '   </span>'; 
html3 += '   <span id ="type_span" class="bronze">'; 
html3 += '    <span class="company_name"><h2><a href="#">Worf</a></h2></span>'; 
html3 += '    <p hidden class="last-name">Worf</p>  <br />'; 
html3 += '    <span ><strong></strong>&nbsp;</span><span>Lieutenant Commander</span>  <br />'; 
html3 += '    <span class="exhibitor_text"><strong>Date of Birth:</strong>&nbsp;</span><span>December 9, 2340 (Terran equivalent)</span>  <br />'; 
html3 += '    <a class ="exhibitor_text" href="//www.example.com" target="_blank">Place of Birth:</a>  <br />'; 
html3 += '   </span>'; 

console.log(typeof(html3)); 
console.log(html3); 
$('.dbOutput').html(html3); 
});

这是我index.php页

<html lang="en-US"> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type='text/javascript' src='/js/layout.js'></script> 
    <link rel="stylesheet" href="css/style.css"> 
    <style> 
     /* Container for the alphabetical sirt */ 
     .tabContainer { 
      -moz-border-radius-topleft:0px; 
      -moz-border-radius-topright:4px; 
      -moz-border-radius-bottomright:4px; 
      -moz-border-radius-bottomleft:4px; 
      border-bottom: 10em; 
      /*color:#333;*/ 
     } 

     /* Navigation Bar for Alphabetical Sort */ 
     .listNav, 
     .ln-letters { overflow: hidden; margin: 0 auto; width: 90%; } 
     .listNavHide { display: none } 
     .listNavShow { display: list-item } 
     .letterCountShow { display: block } 
     .ln-letters a { 
      font-size: 0.9em; 
      display: block; 
      float: left; 
      width: 4%; 
      border: 0px; 
      border-right: none; 
      text-decoration: none; 
      text-align: center; 
      color: 534C3E; 
      /*background: white;*/ 
     } 
     /*.ln-letters .ln-last { border-right: 1px solid silver }*/ 
     .ln-letters a:hover,.ln-letters .ln-selected { background-color: #eaeaea } 
     .ln-letters .ln-disabled { color: #fff; text-decoration: none; } 
     .ln-letter-count { 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 20px; 
      text-align: center; 
      font-size: 0.8em; 
      line-height: 1.35; 
      color: #534C3E 
     } 
     /*# sourceMappingURL=listnav.css.map */ 
    </style> 
    <!--[if lt IE 9]> 
    <script src="js/html5shiv.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <section class="contenido"> 
     <div class="envuelto"> 
      <div class="cuadrados"> 
       <div class="unidad completo"> 
        <h2>Custumers DB</h2> 
        <div class="tabContainer"><div id="demoSix" class="dbOutput" ></div></div> 
       </div> 
      </div> 
     </div> 
    </section> 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="js/jquery-listnav.js"></script> 
    <script src="js/vendor.js"></script> 
    <script> 
     $(function(){ 
      $('#demoSix').listnav({ 
       includeAll: true, 
       filterSelector: '.company_name', 
       includeNums: false, 
       showCounts: false, 
       noMatchText: '', 
       removeDisabled: true, 
       allText: '&infin;' 
      }); 
     }); 
    </script> 
</body> 
</html>

如果我做我的layout.js页以下，它就像一个魅力，见下文

图像

console.log(typeof(html3)); 
console.log(html3); 
$('.dbOutput').html(html3);

但是，如果我的评论之前的输出和取消注释以下输出的排序选项停止工作，请参见下面

console.log(typeof(html2)); 
console.log(html2); 
$('.dbOutput').html(html2);

图像为什么它不工作相同的，如果是相同的输出？我尝试了不同的方法，并且我迷失了方向。这可能很简单，但为什么排序选择适用于html3输出，而不是html2输出。谢谢

来源

2015-12-23 Tavo

问题是功能的范围。自从我通过正确的输出后，我不确定为什么会出现这种情况。我要为插件添加function调用html代码在js文件和固定它，这意味着增加这是`layout.js文件

html += ' <script>' + '\n'; 
html += '  $(function(){' + '\n'; 
html += '   $("#demoSix").listnav({' + '\n'; 
html += '    includeAll: true,' + '\n'; 
html += '    filterSelector: ".company_name",' + '\n'; 
html += '    includeNums: false,' + '\n'; 
html += '    showCounts: false,' + '\n'; 
html += '    noMatchText: "",' + '\n'; 
html += '    removeDisabled: true,' + '\n'; 
html += '    allText: "&infin;"' + '\n'; 
html += '   });' + '\n'; 
html += '  });' + '\n'; 
html += ' </script>';

因此，这是新layout.js文件

$(document).ready(function() { 
    var collection = ""; 
    var obj = []; 
    var html = ''; 
    var html2 = ''; 
    var html3 = ''; 
    $.getJSON("getDBData.php", function(data) { 
     var num = 1; 
     var json = JSON.stringify(data); 
     html += '<div class="tabContainer">' + '\n'; 
     html += '<div id="demoSix">' + '\n'; 
     /* Here I get the information from the DB. No issues here*/ 
     } 
    } 
    html += '    </div>' + '\n'; 
    html += '   </div>' + '\n'; 
    html += ' <script>' + '\n'; 
    html += '  $(function(){' + '\n'; 
    html += '   $("#demoSix").listnav({' + '\n'; 
    html += '    includeAll: true,' + '\n'; 
    html += '    filterSelector: ".company_name",' + '\n'; 
    html += '    includeNums: false,' + '\n'; 
    html += '    showCounts: false,' + '\n'; 
    html += '    noMatchText: "",' + '\n'; 
    html += '    removeDisabled: true,' + '\n'; 
    html += '    allText: "&infin;"' + '\n'; 
    html += '   });' + '\n'; 
    html += '  });' + '\n'; 
    html += ' </script>'; 
    $('.dbOutput').html(html); 
    }); 
});

这里是index.php文件

<html lang="en-US"> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type='text/javascript' src='/js/layout.js'></script> 
    <link rel="stylesheet" href="css/style.css"> 
    <style> 
     /* Container for the alphabetical sirt */ 
     .tabContainer { 
      -moz-border-radius-topleft:0px; 
      -moz-border-radius-topright:4px; 
      -moz-border-radius-bottomright:4px; 
      -moz-border-radius-bottomleft:4px; 
      border-bottom: 10em; 
      /*color:#333;*/ 
     } 

     /* Navigation Bar for Alphabetical Sort */ 
     .listNav, 
     .ln-letters { overflow: hidden; margin: 0 auto; width: 90%; } 
     .listNavHide { display: none } 
     .listNavShow { display: list-item } 
     .letterCountShow { display: block } 
     .ln-letters a { 
      font-size: 0.9em; 
      display: block; 
      float: left; 
      width: 4%; 
      border: 0px; 
      border-right: none; 
      text-decoration: none; 
      text-align: center; 
      color: 534C3E; 
      /*background: white;*/ 
     } 
     /*.ln-letters .ln-last { border-right: 1px solid silver }*/ 
     .ln-letters a:hover,.ln-letters .ln-selected { background-color: #eaeaea } 
     .ln-letters .ln-disabled { color: #fff; text-decoration: none; } 
     .ln-letter-count { 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 20px; 
      text-align: center; 
      font-size: 0.8em; 
      line-height: 1.35; 
      color: #534C3E 
     } 
     /*# sourceMappingURL=listnav.css.map */ 
    </style> 
    <!--[if lt IE 9]> 
    <script src="js/html5shiv.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <section class="contenido"> 
     <div class="envuelto"> 
      <div class="cuadrados"> 
       <div class="unidad completo"> 
        <h2>Customer's DB</h2> 
        <span class="dbOutput" ></span> 
       </div> 
      </div> 
     </div> 
    </section> 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="js/jquery-listnav.js"></script> 
    <script src="js/vendor.js"></script> 
</body> 
</html>

我仍然不知道为什么范围为listNav功能需要像这样，但它的工作原理。

来源

2015-12-28 14:57:40 Tavo

jQuery插件listnav无法正常工作

回答

相关问题