如何在javascript中设置一个切换按钮，以更改div的背景、<p>标记的文本以及两组div之间的切换

Question

因此，我已经在这个项目上工作了几天，在这里我想切换几个页面的元素，以隐藏并使其他元素出现。在使用前面看到的按钮时会发生这种情况。按钮成功地将页面更改为另一个，但我无法将它带回到另一个设置。我改变背景使用数据值在div中。问题是我对javascript的理解有限，而且我确信我的代码可能充满了问题。最后，我希望按钮能够在页面的两种状态之间切换。我也愿意使用JQuery，在我的代码中已经有一些了。作为最后一个注意事项，我还想稍后添加css转换，如果这会改变任何人的答案，或者如果有人在我做之前提供任何建议，那就太好了。

这是一个div的HTML示例。这个特殊的按钮包含切换按钮和我想要切换的div。

<div class="container-projects bg-topics color-div" data-color="#383838" data-color1="#A2AB58">
        <div class="container">
            <h1 id="projects" class="text-center">TOPICS</h1>
            <br />
            <br />

            <div class="row" id="goodPageTopics">
                <div class="col-md-12 text-center">
                    <ul class="list-unstyled text-center">
                        <li class="filter btn btn-primary" data-filter="all">ALL</li>
                        <li class="filter btn btn-primary" data-filter=".branding">POLITICS</li>
                        <li class="filter btn btn-primary" data-filter=".design">ETHICS</li>
                        <li class="filter btn btn-primary" data-filter=".development">MISCALULATIONS</li>
                    </ul>
                </div>
                <div class="mix branding col-md-3" id="goodTopic1">
                    <div class="img-wrapper">
                        <img class="img-responsive" src="images/projects/project1.png" />
                        <a href="#project-1">
                            <div class="img-info bg-primary">Click to see more info</div>
                        </a>
                    </div>
                </div>
                <div class="mix development col-md-3" id="goodTopic2">
                    <div class="img-wrapper">
                        <img class="img-responsive" src="images/projects/project2.png" />
                        <a href="#project-2">
                            <div class="img-info bg-success">Click to see more info</div>
                        </a>
                    </div>
                </div>
                <div class="mix design col-md-3" id="goodTopic3">
                    <div class="img-wrapper">
                        <img class="img-responsive" src="images/projects/project3.png" />
                        <a href="#project-3">
                            <div class="img-info bg-warning">Click to see more info</div>
                        </a>
                    </div>
                </div>
                <div class="mix branding col-md-3" id="goodTopic4">
                    <div class="img-wrapper">
                        <img class="img-responsive" src="images/projects/project4.png" />
                        <a href="#project-4">
                            <div class="img-info bg-danger">Click to see more info</div>
                        </a>
                    </div>
                </div>
                <div class="mix design col-md-3" id="goodTopic5">
                    <div class="img-wrapper">
                        <img class="img-responsive" src="images/projects/project5.png" />
                        <a href="#project-5">
                            <div class="img-info bg-info">Click to see more info</div>
                        </a>
                    </div>
                </div>
                <div class="mix seo col-md-3" id="goodTopic6">
                    <div class="img-wrapper">
                        <img class="img-responsive" src="images/projects/project6.png" />
                        <a href="#project-6">
                            <div class="img-info bg-primary">Click to see more info</div>
                        </a>
                    </div>
                </div>
                <div class="mix design col-md-3" id="goodTopic7">
                    <div class="img-wrapper">
                        <img class="img-responsive" src="images/projects/project7.png" />
                        <a href="#project-7">
                            <div class="img-info bg-success">Click to see more info</div>
                        </a>
                    </div>
                </div>
                <div class="mix seo col-md-3" id="goodTopic8">
                    <div class="img-wrapper">
                        <img class="img-responsive" src="images/projects/project8.png" />
                        <a href="#project-8">
                            <div class="img-info bg-warning">Click to see more info</div>
                        </a>
                    </div>
                </div>

            </div>
        </div>
        <div class="clearfix hidden-xs" style="width:100%; height:50px;"></div>
        <div class="btn-switchbutton-container">
            <button type="button" class="btn-switchbutton color-div" id="change-page" data-color="#9a0707" data-color1="">Change Veiw</button>
        </div>
    </div>

这是一个div的示例，它替换了其他的，但默认情况下是隐藏的。

<div class="mix development col-md-3" id="badTopic1">
        <div class="img-wrapper">
            <img class="img-responsive" src="images/backfiletest.png" />
            <a href="#project-2">
                <div class="img-info bg-success">Click to see more info</div>
            </a>
        </div>
    </div>

这是我开始处理代码之前的代码，但遗憾的是，它无法切换。

$('body').on('click', '#change-page', function () {
            $('.color-div').each(function () {
                $(this).css('background-color', $(this).data('color'));
            });
            // Changes the topics
            $('#badTopic1, #badTopic2, #badTopic3, #badTopic4, #badTopic5, #badTopic6, #badTopic7, #badTopic8').each(function () {
                $('#badTopic1, #badTopic2, #badTopic3, #badTopic4, #badTopic5, #badTopic6, #badTopic7, #badTopic8').show();
                $("#goodTopic1").replaceWith($("#badTopic1"));
                $("#goodTopic2").replaceWith($("#badTopic2"));
                $("#goodTopic3").replaceWith($("#badTopic3"));
                $("#goodTopic4").replaceWith($("#badTopic4"));
                $("#goodTopic5").replaceWith($("#badTopic5"));
                $("#goodTopic6").replaceWith($("#badTopic6"));
                $("#goodTopic7").replaceWith($("#badTopic7"));
                $("#goodTopic8").replaceWith($("#badTopic8"));
            });
            // Changes the about the page text
            $('.change-text').each(function () {
                document.body.innerHTML = document.body.innerHTML.replace('Hello and welcome to (insert name here). Here you are able to see unbiased opinions on the current several current happenings of the world. There is a collection of eight good and bad events that have occurred in our recent history and we would like to share the correct information on the matters.',
                    'Lorem ipsum dolor sit amet, eu sed duis harum. Ex eam congue ponderum electram, nec elit graecis eu, error dolore mandamus nec at. At ullum facilisis eum. In sea consequat incorrupte, viris facilis ad vel. Eos no diceret recusabo, mei et soleat postulant philosophia, cibo libris omnium an mea.');
            });
        });

这是一个新的代码，我相信有一个正确的，更简单的方法

$('body').on('click', '#change-page', function () {
        var element = $("#bg-carousel");

    if(element.css('background-color') == "#e54f31") {

        $('.color-div').each(function () {
                $(this).css('background-color', $(this).data('color1'));
            });
            // Changes the topics
            $('#badTopic1, #badTopic2, #badTopic3, #badTopic4, #badTopic5, #badTopic6, #badTopic7, #badTopic8').each(function () {
                $('#goodTopic1, #goodTopic2, #goodTopic3, #goodTopic4, #goodTopic5, #goodTopic6, #goodTopic7, #goodTopic8').hide();
                $('#badTopic1, #badTopic2, #badTopic3, #badTopic4, #badTopic5, #badTopic6, #badTopic7, #badTopic8').show();
                $("#goodTopic1").replaceWith($("#badTopic1"));
                $("#goodTopic2").replaceWith($("#badTopic2"));
                $("#goodTopic3").replaceWith($("#badTopic3"));
                $("#goodTopic4").replaceWith($("#badTopic4"));
                $("#goodTopic5").replaceWith($("#badTopic5"));
                $("#goodTopic6").replaceWith($("#badTopic6"));
                $("#goodTopic7").replaceWith($("#badTopic7"));
                $("#goodTopic8").replaceWith($("#badTopic8"));
            });
            // Changes the about the page text
            $('.change-text').each(function () {
                document.body.innerHTML = document.body.innerHTML.replace('"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat');
            });
    }

    else {

        $('.color-div').each(function () {
                $(this).css('background-color', $(this).data('color'));
            });
            // Changes the topics
            $('#goodTopic1, #goodTopic2, #goodTopic3, #goodTopic4, #goodTopic5, #goodTopic6, #goodTopic7, #goodTopic8').each(function () {
                $('#badTopic1, #badTopic2, #badTopic3, #badTopic4, #badTopic5, #badTopic6, #badTopic7, #badTopic8').hide();
                $('#goodTopic1, #goodTopic2, #goodTopic3, #goodTopic4, #goodTopic5, #goodTopic6, #goodTopic7, #goodTopic8').show();
                $("#badTopic1").replaceWith($("#goodTopic1"));
                $("#badTopic2").replaceWith($("#goodTopic2"));
                $("#badTopic3").replaceWith($("#goodTopic3"));
                $("#badTopic4").replaceWith($("#goodTopic4"));
                $("#badTopic5").replaceWith($("#goodTopic5"));
                $("#badTopic6").replaceWith($("#goodTopic6"));
                $("#badTopic7").replaceWith($("#goodTopic7"));
                $("#badTopic8").replaceWith($("#goodTopic8"));
            });
            // Changes the about the page text
            $('.change-text').each(function () {
                document.body.innerHTML = document.body.innerHTML.replace('Hello and welcome to (insert name here). Here you are able to see unbiased opinions on the current several current happenings of the world. There is a collection of eight good and bad events that have occurred in our recent history and we would like to share the correct information on the matters.',
                    'Lorem ipsum dolor sit amet, eu sed duis harum. Ex eam congue ponderum electram, nec elit graecis eu, error dolore mandamus nec at. At ullum facilisis eum. In sea consequat incorrupte, viris facilis ad vel. Eos no diceret recusabo, mei et soleat postulant philosophia, cibo libris omnium an mea.');
            });
    }
        });

这就是以前的样子

​

​

这是它的样子，在后面点击颜色和文字变化，但div没有。它保留了第一个div，但没有隐藏它们，我认为它会移动另一组div，它只是将它们隐藏起来。最大的问题是，它不让用户切换回来。

​

​

Answer 1

有一个更简单的方法，只需添加几个div来保存您的两个视图：

     ...
    <li class="filter btn btn-primary" data-filter=".branding">POLITICS</li>
    <li class="filter btn btn-primary" data-filter=".design">ETHICS</li>
    <li class="filter btn btn-primary" data-filter=".development">MISCALULATIONS</li>
  </ul>
</div>
<div id='view1'>
  <div class="mix branding col-md-3" id="goodTopic1">
    <div class="img-wrapper">
      <img class="img-responsive" src="images/projects/project1.png" />
        <a href="#project-1"> ...
          ...
</div>
<div id='view2'>
  <div class="mix development col-md-3" id="badTopic1">
    <div class="img-wrapper">
      <img class="img-responsive" src="images/backfiletest.png" />
        <a href="#project-2"> ...
         ...
</div>

然后，在JS中使view1消失和view2出现就像

$('view1').css('display','block'); $('view2').css('display','none');

然后，把它们交换回来：

$('view2').css('display','block'); $('view1').css('display','none');

没有人可以代替，所以什么都不会失去。