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

使用以下代码段更新您的代码..

＆＃13;

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

＆＃13;

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

＆＃13;

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>

如何使用jQuery替换HTML中的<li>元素？

2 个答案: