Question

我想在单击按钮时获取特定元素。我使用 DOM Traversal 方法选择点击的数据，有什么方法可以用来更快地获取元素？

<div class="item" id="dessert">
                <div class="item-image-div">
                    <img src="mcd/<?= $row["image"]; ?>" alt="" class="item-image" onclick="getSrc(this.src)">
                </div>
                <div class="item-detail">
                    <div class="item-name" onclick="getSrc(this.name)"><?= $row["item"]; ?></div>
                    <div class="item-order">
                        <div class="item-price"><?= $row["price"]; ?></div>
                        <button class="order">
                            <img src="icon/order.png" alt="" width="40px">
                        </button>
                    </div>
                </div>
            </div>

let orderBtn = document.querySelectorAll('.order');
    orderBtn.forEach(function(btn){
        btn.addEventListener('click', (e)=>{
            if (e.target.parentElement.classList.contains('order')) {
                let fullPath = e.target.parentElement.parentElement.parentElement.previousElementSibling.children[0].src;
                let pos = fullPath.indexOf('mcd') + 3;
                let partPath = fullPath.slice(pos);

                let itemId = e.target.parentElement.parentElement.parentElement.parentElement.id;
                const item = {};
                item.img = `${partPath}`;
                console.log(item);

                let itemName = e.target.parentElement.parentElement.previousElementSibling.textContent;
                let itemPrice = e.target.parentElement.previousElementSibling.textContent;
                console.log(itemName);
                console.log(itemPrice);
            }
        });
    });

Answer 1

不是向 button 添加侦听器并在处理程序内部检查单击的父级是 .order，而是向 <img> 添加侦听器。（或者，甚至需要这样做吗？您能否允许同时点击 <img> 和外部 <button>？如果可能的话，这对我来说更有意义）

利用 .closest 以避免不得不使用大量难以阅读的 .parentElement 访问。

使用 querySelector 可以清晰地向下导航到整个 .item 的后代。

document.querySelectorAll('.order > img').forEach((img) => {
    img.addEventListener('click', () => {
        const item = img.closest('.item');
        const fullPath = item.querySelector('img').src;
        const pos = fullPath.indexOf('mcd') + 3;
        const partPath = fullPath.slice(pos);
        const itemId = item.id;
        const itemName = item.querySelector('.item-name').textContent;
        const itemPrice = item.querySelector('.item-price').textContent;
    });
});

获取 DOM 元素的更好方法

1 个答案: