javascript - 在弹出的购物车中显示过滤的部分

Question

我正在为学校作业建立一个网站。它需要有游戏的主题，这就是为什么它以 EFT 游戏为主题。我在我的网站上创建了一个商店页面，并在其中过滤了商店卡片。启用“立即购买”按钮后，商店卡将获得数据属性“购物车”。然后，当我启用显示“在购物车中查看商品”的滑块时，它会阻止其余没有“购物车”属性的商店卡片。

为了增加一些复杂性，我想制作一个按钮，上面写着：查看购物车，然后打开一个模态框（弹出窗口）。在这个窗口中，我只想显示带有“in-cart”属性的商店卡片。

这是我的商店页面的 HTML 和 JavaScript 代码：

    var checkwearable = document.getElementById("wearableknop");
var checkingame = document.getElementById("ingameknop");
var checkcart = document.getElementById("cartknop");



function tickboxes() {
    checker = 2;
    merch = document.getElementsByTagName("section");

    for (var i = 0; i < merch.length; i++) {
        if (checkwearable.checked == false && checkingame.checked == false && checkcart.checked == false || checkwearable.checked == true && checkingame.checked == true && checkcart.checked == true) {
            merch[i].style.display = "block";
          } else {

              merch[i].style.display = "none";

              if (checkwearable.checked == true) {
                if (merch[i].dataset.category == "wearable") {
                    merch[i].style.display = "block";
                  }
                }

                if (checkingame.checked == true) {
                  if (merch[i].dataset.category == "ingame") {
                    merch[i].style.display = "block";
                  }
                }

                if (checkcart.checked == true) {
                  if (merch[i].getAttribute("data-id") == "in-cart") {
                    merch[i].style.display = "block";
                  }
                }

                if (merch[i].getAttribute("data-id") == "in-cart") {
                  merch[i].style.display = "block;"
                }

                if (checkwearable.checked == false && checkingame.checked == false && checkcart.checked == false || checkwearable.checked == true && checkingame.checked == true && checkcart.checked == true) {
              merch[i].style.display = "block";
          }
        }
      }
    }


window.tickboxes() == tickboxes();

function change0()
{
    var elem = document.getElementById("button0");
    if (elem.value=="Buy Now" && button0.classList.contains("defaultBuy")) {
      elem.value = "In-cart";
      button0.classList.toggle("defaultBuy");
      button0.classList.toggle("activeBuy");
      section0.setAttribute("data-id", "in-cart");
    }
    else if (elem.value = "In-cart" && button0.classList.contains("activeBuy")) {
      button0.classList.toggle("defaultBuy");
      button0.classList.toggle("activeBuy");
      section0.setAttribute("data-id", "");
      elem.value = "Buy Now";
    }
}


function change1()
{
    var elem = document.getElementById("button1");
    if (elem.value=="Buy Now" && button1.classList.contains("defaultBuy")) {
      elem.value = "In-cart";
      button1.classList.toggle("defaultBuy");
      button1.classList.toggle("activeBuy");
      section1.setAttribute("data-id", "in-cart");
    }
    else if (elem.value = "In-cart" && button1.classList.contains("activeBuy")) {
      elem.value = "Buy Now";
      button1.classList.toggle("defaultBuy");
      button1.classList.toggle("activeBuy");
      section1.setAttribute("data-id", "");
    }
}

function change2()
{
    var elem = document.getElementById("button2");
    if (elem.value=="Buy Now" && button2.classList.contains("defaultBuy")) {
      elem.value = "In-cart";
      button2.classList.toggle("defaultBuy");
      button2.classList.toggle("activeBuy");
      section2.setAttribute("data-id", "in-cart");
    }
    else if (elem.value = "In-cart" && button2.classList.contains("activeBuy")) {
      elem.value = "Buy Now";
      button2.classList.toggle("defaultBuy");
      button2.classList.toggle("activeBuy");
      section2.setAttribute("data-id", "");
    }
}

function change3()
{
    var elem = document.getElementById("button3");
    if (elem.value=="Buy Now" && button3.classList.contains("defaultBuy")) {
      elem.value = "In-cart";
      button3.classList.toggle("defaultBuy");
      button3.classList.toggle("activeBuy");
      section3.setAttribute("data-id", "in-cart");
    }
    else if (elem.value = "In-cart" && button3.classList.contains("activeBuy")) {
      elem.value = "Buy Now";
      button3.classList.toggle("defaultBuy");
      button3.classList.toggle("activeBuy");
      section3.setAttribute("data-id", "");
    }
}

function change4()
{
    var elem = document.getElementById("button4");
    if (elem.value=="Buy Now" && button4.classList.contains("defaultBuy")) {
      elem.value = "In-cart";
      button4.classList.toggle("defaultBuy");
      button4.classList.toggle("activeBuy");
      section4.setAttribute("data-id", "in-cart");
    }
    else if (elem.value = "In-cart" && button4.classList.contains("activeBuy")) {
      elem.value = "Buy Now";
      button4.classList.toggle("defaultBuy");
      button4.classList.toggle("activeBuy");
      section4.setAttribute("data-id", "");
    }
}

function change5()
{
    var elem = document.getElementById("button5");
    if (elem.value=="Buy Now" && button5.classList.contains("defaultBuy")) {
      elem.value = "In-cart";
      button5.classList.toggle("defaultBuy");
      button5.classList.toggle("activeBuy");
      section5.setAttribute("data-id", "in-cart");
    }
    else if (elem.value = "In-cart" && button5.classList.contains("activeBuy")) {
      elem.value = "Buy Now";
      button5.classList.toggle("defaultBuy");
      button5.classList.toggle("activeBuy");
      section5.setAttribute("data-id", "");
    }
}

function change6()
{
    var elem = document.getElementById("button6");
    if (elem.value=="Buy Now" && button6.classList.contains("defaultBuy")) {
      elem.value = "In-cart";
      button6.classList.toggle("defaultBuy");
      button6.classList.toggle("activeBuy");
      section6.setAttribute("data-id", "in-cart");
    }
    else if (elem.value = "In-cart" && button6.classList.contains("activeBuy")) {
      elem.value = "Buy Now";
      button6.classList.toggle("defaultBuy");
      button6.classList.toggle("activeBuy");
      section6.setAttribute("data-id", "");
    }
}

function change7()
{
    var elem = document.getElementById("button7");
    if (elem.value=="Buy Now" && button7.classList.contains("defaultBuy")) {
      elem.value = "In-cart";
      button7.classList.toggle("defaultBuy");
      button7.classList.toggle("activeBuy");
      section7.setAttribute("data-id", "in-cart");
    }
    else if (elem.value = "In-cart" && button7.classList.contains("activeBuy")) {
      elem.value = "Buy Now";
      button7.classList.toggle("defaultBuy");
      button7.classList.toggle("activeBuy");
      section7.setAttribute("data-id", "");
    }
}

function change8()
{
    var elem = document.getElementById("button8");
    if (elem.value=="Buy Now" && button8.classList.contains("defaultBuy")) {
      elem.value = "In-cart";
      button8.classList.toggle("defaultBuy");
      button8.classList.toggle("activeBuy");
      section8.setAttribute("data-id", "in-cart");
    }
    else if (elem.value = "In-cart" && button8.classList.contains("activeBuy")) {
      elem.value = "Buy Now";
      button8.classList.toggle("defaultBuy");
      button8.classList.toggle("activeBuy");
      section8.setAttribute("data-id", "");
    }
}

//popup window

var modal = document.getElementById("popup");

var cartbtn = document.getElementById("cartbutton");

var span = document.getElementsByClassName("close")[0];

cartbtn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

还有我的 HTML：

    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/master.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans:wght@300&display=swap" rel="stylesheet">

  </head>
  <body>

      <header class="bovenpaginaunhome">
        <img class="logo" src="img/logo.png" alt="The logo of the game">
      </header>
      <nav>
          <ul>
            <li><a href="index.html">Back to Homepage</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="store.html">Store</a></li>
            <li><a href="bronnen.html">Sources</a></li>
            <li><a href="contact.html">Contact page</a></li>
          </ul>
      </nav>

      <hr>

      <div class="filterknoppen">
        <div class="filterKnop">
          <h2>Clothes</h2>
          <label class="switch">
            <input type="checkbox" onclick="tickboxes()" id="wearableknop" name="slider" >
            <span class="slider round"></span>
          </label>
        </div>

        <div class="filterKnop">
          <h2>In-game items</h2>
          <label class="switch">
            <input type="checkbox" onclick="tickboxes()" id="ingameknop" name="slider" >
            <span class="slider round"></span>
          </label>
        </div>

        <div class="filterKnop">
          <h2>See in-cart items</h2>
          <label class="switch">
            <input type="checkbox" onclick="tickboxes()" id="cartknop" name="slider" >
            <span class="slider round"></span>
          </label>
        </div>
      </div>

      <div class="filterknoppen">
            <button id="cartbutton">See your cart</button>
      </div>

      <div id="popup" class="popupwindow">
        <div class="modal-content">
          <div class="modal-header">
            <span class="close">&times;</span>
            <h2>Contents of your cart:</h2>
          </div>
          <div class="modal-body">
            <p>Some text in the Modal Body</p>
            <p>Some other text...</p>
          </div>
          <div class="modal-footer">
            <h3>Thanks for shopping at our webstore!</h3>
            <a href="bedankt.html">Check-out</a>
          </div>
        </div>
      </div>

    <main class="storeCards">

        <script src="js/main.js"></script>

        <section data-category="wearable" class="productCard" id="section0">
          <img class="productFoto" src="img/shirt1.jpg" alt="Een foto van een shirt van deze game"/>
          <h1>USEC-Shirt</h1>
          <p class="productDetails">Battlestate games</p>
          <p>Price €50</p>
          <input type="button" value="Buy Now" id="button0" class="defaultBuy" onclick="change0()">
        </section>

        <section data-category="wearable" class="productCard" id="section1">
          <img class="productFoto" src="img/shirt2.jpg" alt="Een foto van een shirt van deze game"/>
          <h1>EFT-Shirt</h1>
          <p class="productDetails">Battlestate games</p>
          <p>Price €50</p>
          <input type="button" value="Buy Now" id="button1" class="defaultBuy" onclick="change1()">
        </section>

        <section data-category="wearable" class="productCard" id="section2">
          <img class="productFoto" src="img/cap1.jpg" alt="Een foto van een pet van deze game"/>
          <h1>EFT-cap</h1>
          <p class="productDetails">Battlestate games</p>
          <p>Price €30</p>
          <input type="button" value="Buy Now" id="button2" class="defaultBuy" onclick="change2()">
        </section>

        <section data-category="wearable" class="productCard" id="section3">
          <img class="productFoto" src="img/cap2.jpg" alt="Een foto van een pet van deze game"/>
          <h1>BEAR-cap</h1>
          <p class="productDetails">Battlestate games</p>
          <p>Price €30</p>
          <input type="button" value="Buy Now" id="button3" class="defaultBuy" onclick="change3()">
        </section>

        <section data-category="ingame" class="productCard" id="section4">
          <img class="productFoto" src="img/idea.jpg" alt="Een in game rig die je kan kopen"/>
          <h1>IDEA-rig</h1>
          <p class="productDetails">Battlestate games</p>
          <p>Price €30</p>
          <input type="button" value="Buy Now" id="button4" class="defaultBuy" onclick="change4()">
        </section>

        <section data-category="ingame" class="productCard" id="section5">
          <img class="productFoto" src="img/medical.jpg" alt="Een in game medical item die je kan kopen"/>
          <h1>A1-L medical</h1>
          <p class="productDetails">Battlestate games</p>
          <p>Price €10</p>
          <input type="button" value="Buy Now" id="button5" class="defaultBuy" onclick="change5()">
        </section>

        <section data-category="ingame" class="productCard" id="section6">
          <img class="productFoto" src="img/tape.jpg" alt="Een in game tape item"/>
          <h1>Insulating tape</h1>
          <p class="productDetails">Battlestate games</p>
          <p>Price €2</p>
          <input type="button" value="Buy Now" id="button6" class="defaultBuy" onclick="change6()">
        </section>

        <section data-category="ingame" class="productCard" id="section7">
          <img class="productFoto" src="img/pass1.jpg" alt="Een in game toegangspass voor een map"/>
          <h1>Labs pass</h1>
          <p class="productDetails">Battlestate games</p>
          <p>Price €10</p>
          <input type="button" value="Buy Now" id="button7" class="defaultBuy" onclick="change7()">
        </section>

        <section data-category="ingame" class="productCard" id="section8">
          <img class="productFoto" src="img/pass2.jpg" alt="Een in game toegangspass voor een map"/>
          <h1>Labs pass</h1>
          <p class="productDetails">Battlestate games</p>
          <p>Price €10</p>
          <input type="button" value="Buy Now" id="button8" class="defaultBuy" onclick="change8()"/>
        </section>

    </main>

    <hr>

    <footer>
      <h2>Made by Niels Hogenboom</h2>
    </footer>
  </body>
</html>

标签： javascripthtml