Question

我有两个不同ID的部分，第一部分是 id="nature" ，第二部分是 id="birdy" 。两个部分都包含旋转木马，但我保留了一个部分。

我已经应用了这个jquery代码来替换click上的部分。当我点击鸟按钮时，第二部分被第一部分成功替换。

但是当我点击自然按钮时，没有任何反应。我想要的是当页面设置为第二部分（ id="birdy" ）时，点击自然按钮会显示第一部分（ id="nature" ）再次。

请帮助我！

HTML：

<section id="nature">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img class="one" src="img/page.jpg" alt="...">
                <div class="carousel-caption">
                    pic1
                </div>
            </div>
            <div class="item">
                <img class="two" src="img/parallax.jpg" alt="...">
                <div class="carousel-caption">
                    pic2
                </div>
            </div>  

            <div class="item">
                <img class="three" src="img/classic.jpg" alt="...">
                <div class="carousel-caption">
                    pic3
                </div>
            </div>    
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>

<section id="birdy">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            <li data-target="#carousel-example-generic" data-slide-to="4"></li>
            <li data-target="#carousel-example-generic" data-slide-to="5"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img class="one" src="Bimgs/file.jpeg" alt="...">
                <div class="carousel-caption">
                    pic1
                </div>
            </div>
            <div class="item">
                <img class="two" src="Bimgs/file2.jpeg" alt="...">
                <div class="carousel-caption">
                    pic2
                </div>
            </div>  

            <div class="item">
                <img class="three" src="Bimgs/file3.jpeg" alt="...">
                <div class="carousel-caption">
                    pic3
                </div>
            </div>

            <div class="item">
                <img class="three" src="Bimg/.jpeg" alt="...">
                <div class="carousel-caption">
                    pic4
                </div>
            </div>

            <div class="item">
                <img class="three" src="img/classic.jpg" alt="...">
                <div class="carousel-caption">
                    pic5
                </div>
            </div>

            <div class="item">
                <img class="three" src="img/classic.jpg" alt="...">
                <div class="carousel-caption">
                    pic6
                </div>
            </div>    
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>

<!-- button -->
<div class="container ntr-btn">
    <a href="#" class="btn btn-primary btn-lg">NATURE</a>
</div>
<div class="container bird-btn">
    <a href="#" class="btn btn-primary btn-lg">Birds</a>
</div>

的CSS：

#birdy {
  display: none;
}

Jquery的：

<script type="text/javascript">
$(document).ready(function () {
    $('.bird-btn').click(function (e) {
        /* Act on the event */
        $('#birdy').css('display', 'initial');
        $('#nature').replaceWith('<section id="birdy"></section>');
    });
    $('.ntr-btn').click(function (e) {
        /* Act on the event */
        $('#birdy').css('display', 'none');
        $('#birdy').replaceWith('<section id="nature"></section>');

    });
});
</script>

Answer 1

很容易修复（未经测试）：

$(document).ready(function() {
  $('.bird-btn').click(function(e) {
    /* Act on the event */
    $('#birdy').css('display', 'initial');
    $('#nature').css('display', 'none';
  });
  $('.ntr-btn').click(function(e) {
    /* Act on the event */
    $('#birdy').css('display', 'none');
    $('#nature').css('display', 'initial');
  });
});

换句话说，只需根据您点击的按钮切换这些部分的显示。

编辑（更改＆＃34;＃birdy＆＃34; =＆gt;＆＃34;＃nature＆＃34;在最后一行代码中）

Answer 2

您是否尝试过简化结构？您可以只显示和隐藏滑块，而不是通过插入和删除元素来操作DOM：

HTML - 在按钮中添加通用类：

<div class="container ntr-btn slide-selector">
    <a href="#" class="btn btn-primary btn-lg">NATURE</a>
</div>
<div class="container bird-btn slide-selector">
  <a href="#" class="btn btn-primary btn-lg">Birds</a>
</div>

JQuery - 相应地显示和隐藏滑块：

$('.slide-selector').click(function(){
    if($(this).hasClass('ntr-btn')){
        $('#nature').show();
        $('#birdy').hide();
    } else if ($(this).hasClass('bird-btn')){
        $('#birdy').show();
        $('#nature').hide();
    }
});

section替换为jquery中的另一个section

2 个答案:

编辑（更改＆＃34;＃birdy＆＃34; =＆gt;＆＃34;＃nature＆＃34;在最后一行代码中）