jQuery更改已附加的列表的值

Question

我正在尝试使用jQuery替换我网站中的列表项。代码有效，但只能运行一次。我将content-ul列表更改为content-appetizer，但我无法将列表更改为content-menu。列表将保持在我点击content-appetizer的那一刻。

HTML：

<center>
<div class="navbar">
    <ul>
        <li class="menu">This week <br> <b style="color: orange; font-size: 18px;">Menu</b></li>
        <li><h2 style="font-size: 25px;" > Home Cooking </h2></li>
        <li class="appetizer">This week <br> <b style="color: orange; font-size: 18px;">Appetizer</b></li>
    </ul>
</div>

<center>    
<div class="content">
    <ul class="content-ul">
        <li class="content-li">
            <img src="image/nasigoreng.jpg" >
            <h3>Nasi Goreng</h3>
            <p>Fried rice indonesian style with either chicken,lamb and beef.</p>
        </li>

        <li class="content-li">
            <img src="image/ikanbakar.jpg">
            <h3>Ikan Bakar</h3>
            <p>Fried fish with red Javanese traditional sauce.</p>
        </li>

        <li class="content-li">
            <img src="image/miegoreng.jpg">
            <h3>Mie Goreng</h3>
            <p>Fried noodle indonesian style with either chicken,lamb and beef</p>
        </li>

        <li class="content-li">
            <img src="image/sotoayam1.jpg">
            <h3>Soto Sapi</h3>
            <p>Traditional Javanese soup with rice and beef.</p>
        </li>

    </ul>

</div>
</center>

<center>    
<div class="content-menu">
    <ul class="content-ul">
        <li class="content-li">
            <img src="image/nasigoreng.jpg" >
            <h3>fried rice</h3>
            <p>Fried rice indonesian style with either chicken,lamb and beef.</p>
        </li>

        <li class="content-li">
            <img src="image/ikanbakar.jpg">
            <h3>Ikan Bakar</h3>
            <p>Fried fish with red Javanese traditional sauce.</p>
        </li>

        <li class="content-li">
            <img src="image/miegoreng.jpg">
            <h3>Mie Goreng</h3>
            <p>Fried noodle indonesian style with either chicken,lamb and beef</p>
        </li>

        <li class="content-li">
            <img src="image/sotoayam1.jpg">
            <h3>Soto Sapi</h3>
            <p>Traditional Javanese soup with rice and beef.</p>
        </li>

    </ul>

</div>
</center>

<center>    
<div class="content-appetizer">
    <ul class="content-ul">
        <li class="content-li">
            <img src="image/nasigoreng.jpg" >
            <h3>fried tofu</h3>
            <p>Fried rice indonesian style with either chicken,lamb and beef.</p>
        </li>

        <li class="content-li">
            <img src="image/ikanbakar.jpg">
            <h3>hello</h3>
            <p>Fried fish with red Javanese traditional sauce.</p>
        </li>

        <li class="content-li">
            <img src="image/miegoreng.jpg">
            <h3>Mie Goreng</h3>
            <p>Fried noodle indonesian style with either chicken,lamb and beef</p>
        </li>

        <li class="content-li">
            <img src="image/sotoayam1.jpg">
            <h3>Soto Sapi</h3>
            <p>Traditional Javanese soup with rice and beef.</p>
        </li>

        <li class="content-li">
            <img src="image/sotoayam1.jpg">
            <h3>Nasi Ramez</h3>
            <p>Traditional Javanese soup with rice and beef.</p>
        </li>

        <li class="content-li">
            <img src="image/sotoayam1.jpg">
            <h3>Bubur Ayam</h3>
            <p>Traditional Javanese soup with rice and beef.</p>
        </li>

        <li class="content-li">
            <img src="image/sotoayam1.jpg">
            <h3>Soto Ayam</h3>
            <p>Traditional Javanese soup with rice and beef.</p>
        </li>

        <li class="content-li">
            <img src="image/sotoayam1.jpg">
            <h3>Soto Ayam</h3>
            <p>Traditional Javanese soup with rice and beef.</p>
        </li>
    </ul>

</div>
</center>

jQuery的：

$(function(){

    $('.appetizer').click(function(){
        var list_new = $('.content-appetizer').html();
        $('.content-ul').fadeOut(1000).empty(100).append(list_new).fadeIn(1000);
    });

        $('.menu').click(function(){
        var list_new1 = $('.content-menu').html();
        $('.content-ul').fadeOut(1000).empty(100).append(list_new1).fadeIn(1000);
    });
});

Answer 1

使用jQuery＆＃39; s closest()＆amp;特定ul上的类可以让它像这样工作：

＆＃13;

＆＃13;

$(function(){
    $('.appetizer').click(function(){
        var list_new = $('.content-appetizer').html();
        $("ul.dynamic").closest('div').hide();
        $('.content-appetizer').show('slow');
    });
    $('.menu').click(function(){
      var list_new1 = $('.content-menu').html();
      $('ul.dynamic').closest('div').hide();
      $('.content-menu').show('slow');
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<div class="navbar">
    <ul class='main'>
        <li class="menu">This week <br> <b style="color: orange; font-size: 18px;">Menu</b></li>
        <li><h2 style="font-size: 25px;" > Home Cooking </h2></li>
        <li class="appetizer">This week <br> <b style="color: orange; font-size: 18px;">Appetizer</b></li>
    </ul>
</div>

<center>    
<div class="content">
    <ul class="dynamic content-ul">
        <li class="content-li">
            <img src="image/nasigoreng.jpg" >
            <h3>Nasi Goreng</h3>
            <p>Fried rice indonesian style with either chicken,lamb and beef.</p>
        </li>

        <li class="content-li">
            <img src="image/ikanbakar.jpg">
            <h3>Ikan Bakar</h3>
            <p>Fried fish with red Javanese traditional sauce.</p>
        </li>

        <li class="content-li">
            <img src="image/miegoreng.jpg">
            <h3>Mie Goreng</h3>
            <p>Fried noodle indonesian style with either chicken,lamb and beef</p>
        </li>

        <li class="content-li">
            <img src="image/sotoayam1.jpg">
            <h3>Soto Sapi</h3>
            <p>Traditional Javanese soup with rice and beef.</p>
        </li>

    </ul>

</div>
</center>

<center>    
<div class="content-menu">
    <ul class="dynamic content-ul">
        <li class="content-li">
            <img src="image/nasigoreng.jpg" >
            <h3>fried rice</h3>
            <p>Fried rice indonesian style with either chicken,lamb and beef.</p>
        </li>

        <li class="content-li">
            <img src="image/ikanbakar.jpg">
            <h3>Ikan Bakar</h3>
            <p>Fried fish with red Javanese traditional sauce.</p>
        </li>

        <li class="content-li">
            <img src="image/miegoreng.jpg">
            <h3>Mie Goreng</h3>
            <p>Fried noodle indonesian style with either chicken,lamb and beef</p>
        </li>

        <li class="content-li">
            <img src="image/sotoayam1.jpg">
            <h3>Soto Sapi</h3>
            <p>Traditional Javanese soup with rice and beef.</p>
        </li>

    </ul>

</div>
</center>

<center>    
<div class="content-appetizer">
    <ul class="dynamic content-ul">
        <li class="content-li">
            <img src="image/nasigoreng.jpg" >
            <h3>fried tofu</h3>
            <p>Fried rice indonesian style with either chicken,lamb and beef.</p>
        </li>

        <li class="content-li">
            <img src="image/ikanbakar.jpg">
            <h3>hello</h3>
            <p>Fried fish with red Javanese traditional sauce.</p>
        </li>

        <li class="content-li">
            <img src="image/miegoreng.jpg">
            <h3>Mie Goreng</h3>
            <p>Fried noodle indonesian style with either chicken,lamb and beef</p>
        </li>

        <li class="content-li">
            <img src="image/sotoayam1.jpg">
            <h3>Soto Sapi</h3>
            <p>Traditional Javanese soup with rice and beef.</p>
        </li>

        <li class="content-li">
            <img src="image/sotoayam1.jpg">
            <h3>Nasi Ramez</h3>
            <p>Traditional Javanese soup with rice and beef.</p>
        </li>

        <li class="content-li">
            <img src="image/sotoayam1.jpg">
            <h3>Bubur Ayam</h3>
            <p>Traditional Javanese soup with rice and beef.</p>
        </li>

        <li class="content-li">
            <img src="image/sotoayam1.jpg">
            <h3>Soto Ayam</h3>
            <p>Traditional Javanese soup with rice and beef.</p>
        </li>

        <li class="content-li">
            <img src="image/sotoayam1.jpg">
            <h3>Soto Ayam</h3>
            <p>Traditional Javanese soup with rice and beef.</p>
        </li>
    </ul>

</div>
</center>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！