我开始研究jQuery。
我正在尝试在第一个项目列表的同一位置显示我的第二个项目列表,当我点击“显示更多链接”时,但我没有成功。
任何人都可以提供帮助吗?
<ul id="showfirst">
<h1>Links</h1>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="# id="next">show more links </a></li>
</ul>
<ul id="showsecond">
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">+ links</a></li>
</ul>
</section>
JavaScript的:
<script type="text/javascript">
$('#next).click(function{
$('#showsecond').show();
});
</script>
答案 0 :(得分:4)
缺少PrincipalServerContext
并且已关闭字符串()
:
'#next'
应为$('#next).click(function{
和未公开的报价:
$('#next').click(function() {
应为<li><a href="#>
答案 1 :(得分:4)
这是一个有效的例子:
$(function() {
$('#next').click(function() {
$('#showsecond').show();
});
});
&#13;
#showsecond {
display: none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="showfirst">
<h1>Links</h1>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li>
<a href="#" id="next">show more links </a> </li>
</ul>
<ul id="showsecond">
<li><a href="# ">Link 5</a></li>
<li><a href="# ">Link 6</a></li>
<li><a href="# ">Link 7</a></li>
<li><a href="# ">Link 8</a></li>
<li><a href="# ">+ links</a></li>
</ul>
&#13;
您必须先指定隐藏第二个列表。然后你遇到了一些错误(在点击事件function
之后,错过了2个地方的结束语,丢失了()。此外,您还需要将jquery代码包装在document.ready()
或我的代码$(function(){})
中,以防止竞争条件。
希望这有帮助!
答案 2 :(得分:4)
console.log("Hello World");
http://api.virwox.com/api/json.php?method=getBestPrices&symbols[0]=BTC/SLL
答案 3 :(得分:2)
您必须检查是否已关闭字符串。有一些未终止的字符串。
$('#next').click(function(){
$('#showfirst').hide();
$('#showsecond').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<h1>Links</h1>
<ul id="showfirst">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#" id="next">show more links</a></li>
</ul>
<ul id="showsecond" style="display:none;">
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">+ links</a></li>
</ul>
</section>
答案 4 :(得分:2)
三个问题:
href="#
属性缺少结束双引号function () {
$('#next)
缺少结束语。偶尔查看控制台会很有帮助。
如果您希望最初隐藏第二个列表,请将属性添加到HTML:
<ul id="showsecond" style="display:none">
答案 5 :(得分:2)
$('#showsecond').hide();
$('#next').click(function(){
$('#showsecond').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="showfirst">
<h1>Links</h1>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#" id="next">show more links </a></li>
</ul>
<ul id="showsecond">
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">+ links</a></li>
</ul>
答案 6 :(得分:1)
var listItems = $("#showsecond li");
此语句将检索所有li标签元素,然后我们跟踪这些元素,并使用append()
函数将每个元素附加到第一个列表中。
$('#showfirst').append(product);
$('#showsecond').hide();
$("#next").click(function(){
var listItems = $("#showsecond li");
listItems.each(function(idx, li) {
var product = $(li);
$('#showfirst').append(product);
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="showfirst">
<h1>Links</h1>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#" id="next">show more links </a></li>
</ul>
<ul id="showsecond">
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">+ links</a></li>
</ul>
</section>
&#13;