如何使用jQuery從另一個onclick中更改ul列表項目？

我開始學習jQuery。如何使用jQuery從另一個onclick中更改ul列表項目？

我試圖展示我的第二個項目列表在第一個項目列表的地方，當我點擊「顯示更多鏈接」，但我沒有成功。

任何人都可以提供一些幫助嗎？

 <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>

來源

2017-09-14 mehdi

行情超出BA的槊。 –

並且'function'必須在開始的大括號之前加上括號'（）''{' –

有缺失()並沒有帶閉弦'#next'：

$('#next).click(function{應該$('#next').click(function() {

和未關閉的報價：

<li><a href="#>應該<li><a href="#"

來源

2017-09-14 08:21:47 Ivan

也是選擇器不是「關閉」的：它錯過了'' –

@ ADreNaLiNe-DJ加了 – Ivan

還有1個錯誤第一個列表的最後一個錨點元素。缺少'''''（href =「＃）' –

這裏是一個工作示例：

$(function() { 
 
    $('#next').click(function() { 
 

 
    $('#showsecond').show(); 
 

 
    }); 
 
});

#showsecond { 
 
    display: none; 
 
}

<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>

你必須指定第二個名單時首先被隱藏。然後你有一些錯誤（錯過了2個地方的結束報價，在你點擊事件的function之後缺少（））。此外，您還需要將您的jQuery代碼包裝在document.ready()或我的代碼$(function(){})中，以防止競爭狀況。

希望這會有所幫助！

來源

2017-09-14 08:22:04

你可以給你的代碼解釋嗎？他正在學習JavaScript，所以他需要知道它失敗的地方。 –

@ ADreNaLiNe-DJ正在編輯我的答案。謝謝 –

你必須檢查你是否關閉了你的琴絃。有一些未終止的字符串。

$('#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>

來源

2017-09-14 08:23:58

三個問題：

一個href="#屬性缺少一個右雙引號
函數表達式缺少括號。應該是function() {
選擇器$('#next)缺少結束報價。

它有助於在一段時間內查看控制檯。

如果你想成爲最初是隱藏的第二個列表，然後一個屬性添加到HTML：

<ul id="showsecond" style="display:none">

來源

2017-09-14 08:25:17 trincot

var listItems = $("#showsecond li");此語句將檢索所有的L1標籤元素，然後我們追溯這些元素，其中每一元素追加到第一個列表使用append()函數。 $('#showfirst').append(product);

$('#showsecond').hide(); 
 
$("#next").click(function(){ 
 
    var listItems = $("#showsecond li"); 
 
    listItems.each(function(idx, li) { 
 
    var product = $(li); 
 
    $('#showfirst').append(product); 
 
    }); 
 
});

<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>

來源

2017-09-14 08:27:39

這是你期望的輸出嗎？ –

$('#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>

來源

2017-09-14 08:28:20 rckrd

$('#showsecond').hide(); 
 
$("#next").click(function(){ 
 
$("#next").closest('li').remove(); 
 
    var listItems = $("#showsecond li"); 
 
    listItems.each(function(idx, li) { 
 
    var product = $(li); 
 
    $('#showfirst').append(product); 
 
    }); 
 
    
 
});

<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>

來源

2017-09-14 08:36:56

[eniazmandi]（http://www.eniazmandi.com/） – mehdi

如何使用jQuery從另一個onclick中更改ul列表項目？

回答

相關問題