时间戳

首页 > 解决方案 > 如何使用javascript查找点击元素的类索引？

javascript - 如何使用javascript查找点击元素的类索引？

问题描述

我有一个基于选项卡的网站，其中通过克隆默认选项卡视图动态创建选项卡，但是，在不知道每个元素的索引号的情况下，无法在每个选项卡上执行逻辑。

function search(){
    window.addEventListener("keyup", function(event) {
        if (event.keyCode === 13) {
            event.preventDefault();
            alert(click)
            var input = document.getElementsByClassName("myTextInputID")[click].value;
            if (input.includes("https://www.amazon.co.uk/")) {
                document.getElementsByClassName("prodcont")[click].style.display = "block"
                document.getElementsByClassName("imgcont")[click].innerHTML = '<img class="image" src="https://www.needforseat.de/media/image/22/15/b3/MAXNOMIC-R-_LVL_Edition_Pro_YkaFLtIVOgbL1_320x463.jpg">';
                document.getElementsByClassName("h1")[click].innerHTML = prodName;
                document.getElementsByClassName("containFORM")[click].style.backgroundColor = "white"
                
            } else {
                URLerror.appendChild(urlerror);
                var cont = document.getElementsByClassName("containFORM")[click];
                cont.insertAdjacentElement("afterend", URLerror);
                setTimeout(function() {
                    URLerror.remove();
                }, 2000);
            }
        }
    });
}

我设法想出的唯一解决方案是遍历所有类并给它们一个name与它们的类号匹配的值，然后每当单击选项卡按钮时，它都会返回其名称。但是，这仅适用于前 2 个选项卡，并且仅上升到一个索引号，但是当我为其值添加警报时，clicked它显示了正确的值，但代码在类索引 [1] 上运行，这非常令人困惑。

    <div class="tabcontainer" id="tabcon" style="background-color: aquamarine">
        <ul id="navigation1">
            <li class="tabli" id="button1"><button class="tabs" id="default" onclick="openPage('0', this, 'red'); buttonOnclick(this.name);"></button></li>
            <ul id="navigation2">
                <li id="tabli">
                    <button onclick="newTab()" class="addbut" style="text-align: center">+</button>
                </li>   
            </ul>
        </ul>
    </div>

function buttonOnclick(clicked) {
    
    for (let x = 0; x < document.getElementsByClassName("tabs").length; x++){
        document.getElementsByClassName("tabs")[x].name=x
        click = clicked
    }
    
}

标签： javascripthtmljquerydjangotabs

解决方案

如果不知道每个元素的索引号，就无法在每个选项卡上执行逻辑

你会很高兴知道这不是真的。您的事件处理程序是使用一个KeyboardEvent对象调用的，该对象与所有Event对象一样，具有target一个引用事件所针对的元素的属性。从那里您可以使用 CSS 选择器找到它的容器，并且您可以使用（查找 CSS 选择器的第一个匹配项）或（查找所有匹配项）找到closest该容器中的任何元素。querySelectorquerySelectorAll

我无法完全弄清楚您在代码中所做的事情，但这将为您提供.tabcontainer包含事件目标元素的元素：

const container = event.target.closest(".tabcontainer");

这是一个例子：

window.addEventListener("keyup", function(event) {
    // Find the container
    const container = event.target.closest(".tabcontainer");
    if (!container) {
        console.log("Couldn't find container for keyup");
        return;
    }
    
    // Find the counter element
    const counter = container.querySelector(".counter");
    
    // Increment it
    counter.textContent = +counter.textContent + 1;
});
<div>Start by clicking here to focus the document, then press <kbd>Tab</kbd> to tab to the "tabs" below and press some keys&nbsp;&mdash; watch the counter for that "tab" increase.</div>
<div class="tabcontainer" style="background-color: aquamarine">
    <ul>
        <li class="tabli" autofocus tabindex="0">this can be tabbed to</li>
        <li>Keyups in this tab: <span class="counter">0</span></li>
    </ul>
</div>
<div class="tabcontainer" style="background-color: aquamarine">
    <ul>
        <li class="tabli" autofocus tabindex="0">this can be tabbed to</li>
        <li>Keyups in this tab: <span class="counter">0</span></li>
    </ul>
</div>
<div class="tabcontainer" style="background-color: aquamarine">
    <ul>
        <li class="tabli" autofocus tabindex="0">this can be tabbed to</li>
        <li>Keyups in this tab: <span class="counter">0</span></li>
    </ul>
</div>
<div class="tabcontainer" style="background-color: aquamarine">
    <ul>
        <li class="tabli" autofocus tabindex="0">this can be tabbed to</li>
        <li>Keyups in this tab: <span class="counter">0</span></li>
    </ul>
</div>
<div class="tabcontainer" style="background-color: aquamarine">
    <ul>
        <li class="tabli" autofocus tabindex="0">this can be tabbed to</li>
        <li>Keyups in this tab: <span class="counter">0</span></li>
    </ul>
</div>

推荐阅读