如何添加在点击所有购买按钮后出现的表单？

aij0ehis 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(299)

更准确地说，表单仅在页面的第一个id=“我的表单”上显示，例如，如果我的第一个按钮的id=“我的表单”以及第二个按钮的id相同，则表单将仅在第一个按钮上显示，而不会在其他按钮上显示。
提前谢谢！！！！！！！

const openForm = document.getElementById("my-form")
exitForm = document.getElementById("close-buy-form")
main = document.querySelector("main")

openForm.addEventListener("click", () => {
    main
        .classList
        .add("body-btn");
})
exitForm.addEventListener("click", () => {
    main
        .classList
        .remove("body-btn");
})

main.body-btn {
    display: block;
}

<nav>
    <img class="exit-btn" id="exit-btn-js" src="/assets/exit.svg" alt="">
    <ul class="nav-links">
        <li><a data-link="home" class="normal-a nav-link">Home</a></li>
        <li><a data-link="about" class="normal-a nav-link">About</a></li>
        <li><a data-link="products" class="normal-a nav-link">Products</a></li>
        <li><a data-link="reviews" class="normal-a nav-link">Reviews</a></li>
        <li class=" buy-now">
            <a href="#order" class="premium-a" id="my-form"><span class="didi">Buy now</span></a>
        </li>
    </ul>
</nav>

<section class="hero">
    <div class="left-hero">
        <h1>Present Your <span>Cool</span> Product</h1>
        <p>Lorem ipsum dolor.</p>
        <div class="buy-now">
            <a href="#order" class="didi" id="my-form">BUY NOW</a>
        </div>
    </div>
    <div class="right-hero">
        <img src="/assets/watch-2.png" alt="shoe-6">
    </div>
</section>

一个月的html/css和这些显示和隐藏元素的js技巧。

JavaScript Html css show-hide

来源：https://stackoverflow.com/questions/68322288/how-to-add-a-form-that-appears-after-clicking-on-all-the-buy-buttons

1条答案

按热度按时间

puruo6ea1#

我试了3个小时才找到答案。。。我确实发现我需要为每个按钮添加一个不同的id，该id应该有自己的常量，就像在下一个代码中一样：

<script>
    const openForm = document.getElementById("my-form")
    openForm2 = document.getElementById("my-form-2")
    exitForm = document.getElementById("close-buy-form")
    main = document.querySelector("main")

    openForm2.addEventListener("click", () => {
        main
            .classList
            .add("body-btn");
    })
    openForm.addEventListener("click", () => {
        main
            .classList
            .add("body-btn");
    })
    exitForm.addEventListener("click", () => {
        main
            .classList
            .remove("body-btn");
    })
</script>

赞(0）回复(0）举报 2021-09-23

我来回答

如何添加在点击所有购买按钮后出现的表单？

1条答案

相关问题

热门标签

最新问答