如何在javascript中创建切换按钮以更改div的背景、a<；p>；标记并在两组div之间切换

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

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

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

这是以前的样子

这是单击颜色和文本后的外观，但div没有改变。它保留了第一个div，但没有隐藏它们，我认为它会将另一组div移动到适当的位置，它只是将它们隐藏起来。最大的问题是它不允许用户切换回来

---

有一个更简单的方法，只需添加几个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>

然后，将它们调回：

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

---

无需更换，因此不会丢失任何东西。

在我尝试时，它似乎不起作用。我如何实现它以帮助切换存储在data color和data-Color1中的背景色，而不查看代码的其余部分，我不能告诉你为什么它不起作用。自从我把这个问题贴出来后，我对它做了很多修改，似乎无法让它发挥作用。我尝试了很多Jquery的东西，对它进行了重组，现在它有点混乱。你介意看一下吗？

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

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

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

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