jQueryを使用してulリスト項目を別のonclickから変更するには？

Question

私はjQueryを勉強し始めています。

私は、アイテムの最初のリストがある場所と同じ場所に2番目のアイテムのリストを表示しようとしていますが、「もっと表示する」をクリックすると成功しません。

誰か助けてもらえますか？

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

：

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

と閉じていない引用符のようになります。

<script type="text/javascript"> 
    $('#next).click(function{ 

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

}); 
</script> 

Answer 1

が閉じられた文字列'#next'が()が欠落してやりなさいれますはここ<li><a href="#"

Answer 2

あるべき作業例です：

$(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の後に2つの箇所で引用符が欠落していません）。また、競合状態を防ぐために、document.ready()または自分のコード$(function(){})の中にjqueryコードをラップする必要があります。

希望すると便利です。

Answer 3

文字列を閉じることを確認する必要があります。終わりのない文字列がいくつかありました。

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

Answer 4

3つの問題：

• 一つhref="#属性は、関数式は括弧が欠落している
• 終了二重引用符が欠落しています。 function() {
• セレクタ$('#next)には閉じ引用符がありません。

これはしばらくの間、コンソールを見るのに役立ちます。

あなたが最初に隠さされる第2のリストが必要な場合は、HTMLに属性を追加します。

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

Answer 5

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); 
 
    }); 
 
});

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

Answer 6

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

Answer 7

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