如何在JavaScript中制作切換按鈕以更改div的背景， <p> 標記並在兩組div之間切換

Question

因此，我已經在該項目上工作了幾天，我想切換頁面的幾個元素以使其隱藏並讓其他元素出現。 這是通過使用您之前看到的按鈕來實現的。 該按鈕成功將頁面切換到另一個頁面，但是我無法將其恢復到另一個設置。 我使用div中的data-value更改背景。 問題是我對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替換了其他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');

沒有替代品，因此不會丟失任何東西。