jQuery插件listnav没有正常使用函数
我正在使用listNav按字母顺序排列数据库中的数据。如果我将我的列表硬编码到HTML页面中，该插件就像一个魅力。问题是数据库有2500多个条目，并且它们将继续增长，因此每次有更新时硬编码输入都很费时间。
我正在使用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> </span><span>Commander</span> <br />';
html2 += ' <span class="exhibitor_text"><strong>Date of Birth:</strong> </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> </span><span>Ensign</span> <br />';
html2 += ' <span class="exhibitor_text"><strong>Date of Birth:</strong> </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> </span><span>Lieutenant Commander</span> <br />';
html2 += ' <span class="exhibitor_text"><strong>Date of Birth:</strong> </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> </span><span>Commander</span> <br />';
html2 += ' <span class="exhibitor_text"><strong>Date of Birth:</strong> </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> </span><span>Captain</span> <br />';
html2 += ' <span class="exhibitor_text"><strong>Date of Birth:</strong> </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> </span><span>Captain</span> <br />';
html2 += ' <span class="exhibitor_text"><strong>Date of Birth:</strong> </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> </span><span>Commander</span> <br />';
html2 += ' <span class="exhibitor_text"><strong>Date of Birth:</strong> </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> </span><span>Lieutenant Commander</span> <br />';
html2 += ' <span class="exhibitor_text"><strong>Date of Birth:</strong> </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> </span><span>Commander</span> <br />';
html3 += ' <span class="exhibitor_text"><strong>Date of Birth:</strong> </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> </span><span>Ensign</span> <br />';
html3 += ' <span class="exhibitor_text"><strong>Date of Birth:</strong> </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> </span><span>Lieutenant Commander</span> <br />';
html3 += ' <span class="exhibitor_text"><strong>Date of Birth:</strong> </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> </span><span>Commander</span> <br />';
html3 += ' <span class="exhibitor_text"><strong>Date of Birth:</strong> </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> </span><span>Captain</span> <br />';
html3 += ' <span class="exhibitor_text"><strong>Date of Birth:</strong> </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> </span><span>Captain</span> <br />';
html3 += ' <span class="exhibitor_text"><strong>Date of Birth:</strong> </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> </span><span>Commander</span> <br />';
html3 += ' <span class="exhibitor_text"><strong>Date of Birth:</strong> </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> </span><span>Lieutenant Commander</span> <br />';
html3 += ' <span class="exhibitor_text"><strong>Date of Birth:</strong> </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: '∞'
});
});
</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输出。感谢
1 个答案:
答案 0 :(得分：1)
问题是该功能的范围。我不知道为什么会这样，因为我传递了正确的输出。我必须将function调用插件添加到js文件中的html代码并修复它，这意味着将其添加到`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: "∞"' + '\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: "∞"' + '\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函数的范围需要像这样，但是它有效。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？