有没有办法简单地使用 JQuery 的 Javascript EventListener？

Question

我有以下 Javascript 代码，我想知道是否可以简化。

    let seattle = svgDoc.getElementById("Seattle");
    seattle.addEventListener("mouseover", hover);
    seattle.addEventListener("mouseout", unhover);
    seattle.addEventListener("click", select);

    let sanJose = svgDoc.getElementById("San_Jose");
    sanJose.addEventListener("mouseover", hover);
    sanJose.addEventListener("mouseout", unhover);
    sanJose.addEventListener("click", select);

    let losAngeles = svgDoc.getElementById("Los_Angeles");
    losAngeles.addEventListener("mouseover", hover);
    losAngeles.addEventListener("mouseout", unhover);
    losAngeles.addEventListener("click", select);

    more cities...

当用户选择特定城市时，我只需要为该特定城市禁用事件监听器并存储城市名称（这也是元素 ID）。

function select(){
        if(numSelected != 2){
            if(!startSet){start=this.id; startSet = true;}
            else if(!endSet){end=this.id; endSet = true;}
            this.style.fill = "#5cb85c";
            this.removeEventListener("mouseover", hover);
            this.removeEventListener("mouseout", unhover);
            this.removeEventListener("click", select);
            this.addEventListener("click", unselect);
            numSelected++;
        }
    }

我在某处读到我可以使用 JQuery 将事件侦听器添加到所有类，这样我就可以做类似的事情

${".cities"}.addEventListener("click", select);

但是有没有办法获取特定元素 ID 并仅禁用该元素的事件侦听器？

Answer 1

是的。 对于初学者，我认为你在那里有一个错字。 它是$(".cities")而不是${".cities"} （括号而不是大括号）。

其次，您可能会注意到您传递给$() function 的实际上是一个 CSS 选择器，并且确实有很多这样的选择器。 在 CSS 的世界中，如果您想将样式应用于具有特定 class 的元素，您可以使用. . 但是，如果您想要使用特定 ID，请使用#指示它。 因此，如果您有一个 ID 为“San_Jose”的元素，您可以使用$('#San_Jose')引用它