按钮叠加。

Question

问题是我想为我们销售的每顿饭创建一个叠加层，我想通过“订购”按钮激活它，但问题是我似乎不知道如何定位每个特定按钮以便给每个按钮不同的覆盖这是html    <div class="container">        <div class="MenuItems">            <img src="ribeye.jpg">            <button onclick="on()">Order Now</button>            <img src="Sirloin.jpg">            <button onclick="on()">Order Now</button>            <img src="Skirt.jpg">            <button onclick="on()">Order Now</button>            <img src="T-Bone.jpg">            <button onclick="on()">Order Now</button>            <img src="TomahawkSteak.jpg">            <button onclick="on()">Order Now</button>            <img src="Flank.jpg">            <button onclick="on()">Order Now</button>            <img src="Chuck.jpg">            <button onclick="on()">Order Now</button>            <img src="BBQChuck.jpg">            <button onclick="on()">Order Now</button>            <img src="ribeye.jpg">            <button onclick="on()">Order Now</button>        </div>        <div class="left">            <div class="SideMenu">            <ul>                <li><a href="Menu.html">Steak</a></li>                <li><a href="Chicken.html">Chicken</a></li>                <li><a href="Appietizers.html">Appietizers</a></li>                <li><a href="beverages.html">Bevreges</a></li>                <li><a href="Desserts.html">Desserts</a></li>            </ul>            </div>        </div>    </div>这应该是叠加层之一，但是我需要创建多个其他叠加层并能够将它们分配给我选择的任何按钮    <div id="over">        <img src="r.png">        <Button class="AddBtn">-</Button>        <Button class="SubtractBtn">+</Button>        <Button class="CloseBtn" onclick="off()">X</Button>    </div>    <script type="text/javascript" src="MenuJS.js"></script></body></html>Javascript：function on() {    document.getElementById("over").style.display = "block";  }  function off() {    document.getElementById("over").style.display = "none";  }

Answer 1

this您可以在调用函数时作为参数传递，并在函数event.target内访问被点击的元素

HTML：

<button onclick="on(this)">Order Now</button>

JS：

function on() {

  console.log(event.target)

}

对于您正在寻找的功能，您的方法将取决于您如何构建 HTML。

对于最基本的方法，您可以执行以下操作：

HTML：

    <button onclick="on(this)">Order Now</button>

    <div class="over">

        <img src="r.png">

        <p>overlay 1</p>

        <Button class="AddBtn">-</Button>

        <Button class="SubtractBtn">+</Button>

        <Button class="CloseBtn" onclick="off()">X</Button>

    </div>

    <button onclick="on(this)">Order Now</button>

    <div class="over">

        <img src="r.png">

        <p>overlay 2</p>

        <Button class="AddBtn">-</Button>

        <Button class="SubtractBtn">+</Button>

        <Button class="CloseBtn" onclick="off()">X</Button>

    </div>

    <button onclick="on(this)">Order Now</button>

    <div class="over">

        <img src="r.png">

        <p>overlay 3</p>

        <Button class="AddBtn">-</Button>

        <Button class="SubtractBtn">+</Button>

        <Button class="CloseBtn" onclick="off()">X</Button>

    </div>

JS：

function on() {

  event.target.nextElementSibling.style.display = 'block'

}

function off() {

  event.target.parentElement.style.display = 'none'

}

这是利用nextElementSibling（因为按钮之后的下一个元素是覆盖）和parentElement（其中的容器closeBtn是覆盖）