我該如何更換 <li> HTML中的元素與使用jQuery有所不同？

Question

我有一個現有的項目列表，以及當用戶單擊列表項目時顯示的那些列表信息。 我必須創建一個按鈕（具有該按鈕），單擊該按鈕即可顯示不同的列表以及新信息。 這是我的HTML：

<div class="races" id="5k">
                <h3>5k/10 Events</h3>
                <ul>
                    <li class="sprint">Mini Sprint</li>
                        <ul>
                            <li class="info">10/30/17<br/>Memorial Park<br/>Appleton</li>
                        </ul>
                    <li class="iron">Iron Horse</li>
                        <ul>
                            <li class="info">11/06/17<br/>Bay Beach Park<br/>Green Bay</li>
                        </ul>
                    <li class="twilight">Twilight Trail</li>
                        <ul>
                            <li class="info">11/13/17<br/>River's Edge Park<br/>Wrightstown</li>
                        </ul>
                </ul>
</div><!--  End of '5k' div-->
<nav>
    <button id="futureEvents">Future Events</button>
</nav>

這是我的JavaScript：

$(document).ready(function() {

var v = f;

    $("button#futureEvents").click(function(){
        if (v == false){
            $(".sprint").replaceWith("<li class='snowball'>Snowball Sprint</li>");

            v = true;
        }//end if
    });//end future events button
});//end document ready

我也必須把它扔進去，以便在用戶單擊列表項時顯示信息：

$("li").click(function() {
$(this).next().children().toggle();

});

有人可以幫幫我嗎？ 我不明白為什么用方法替換根本不起作用。 當我單擊按鈕時，它至少應該替換文本...謝謝！

Answer 1

使用以下代碼段更新您的代碼。

 $(document).ready(function() { var v = false; $("button#futureEvents").click(function(){ if (v == false){ $(".sprint").replaceWith("<li class='snowball'>Snowball Sprint</li>"); v = true; }//end if });//end future events button });//end document ready $("li").click(function(e) { e.stopPropagation(); $(this).find('ul').toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="races" id="5k"> <h3>5k/10 Events</h3> <ul> <li class="sprint">Mini Sprint <ul> <li class="info">10/30/17<br/>Memorial Park<br/>Appleton</li> </ul></li> <li class="iron">Iron Horse <ul> <li class="info">11/06/17<br/>Bay Beach Park<br/>Green Bay</li> </ul></li> <li class="twilight">Twilight Trail <ul> <li class="info">11/13/17<br/>River's Edge Park<br/>Wrightstown</li> </ul></li> </ul> </div><!-- End of '5k' div--> 

Answer 2

您的代碼有兩個問題

• 將v初始化為false而不是f

• 您需要使用nextUntil進行切換

演示

 $(document).ready(function() { var v = false; $("button#futureEvents").click(function() { if (v == false) { $(".sprint").replaceWith("<li class='snowball'>Snowball Sprint</li>"); v = true; } }); }); $("li").click(function() { $(this).nextUntil( "li" ).toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="races" id="5k"> <h3>5k/10 Events</h3> <ul> <li class="sprint">Mini Sprint</li> <ul> <li class="info">10/30/17<br/>Memorial Park<br/>Appleton</li> </ul> <li class="iron">Iron Horse</li> <ul> <li class="info">11/06/17<br/>Bay Beach Park<br/>Green Bay</li> </ul> <li class="twilight">Twilight Trail</li> <ul> <li class="info">11/13/17<br/>River's Edge Park<br/>Wrightstown</li> </ul> </ul> </div> <nav> <button id="futureEvents">Future Events</button> </nav>