将变量与字符串数组匹配？答案

【问题标题】：Matching a variable to an array of strings?将变量与字符串数组匹配？
【发布时间】：2017-06-26 14:24:51
【问题描述】：

所以我有一个字符串数组（我认为我做对了）：

var editableObjects = ['.body-copy', 'img', '.subhead', '.meta', '.caption', '.hyperlink', '.bullet'];

获取鼠标下元素的函数：

function getMouseElement(event) {
    var posX = event.clientX,
    posY = event.clientY;
    // get the element that is located under the mouse 
   var overElem = document.elementFromPoint(posX, posY);
   return overElem;
}

然后是这个 jquery 监听器，它监视“.editable”元素上的鼠标悬停：

$('#wrapper').on('mouseover', '.editable', function(event) {
var m = getMouseElement(event);
console.log(m.className); /*This correctly returns the tag of the element under the mouse*/
for (var c = editableObjects.length - 1; c >= 0; c--) {
    var o = editableObjects[c];
    if (m.className = o) {
        console.log(m + ' matches ' + o);
    } else {}
}
});

我想要做的是让函数查看列表并查看鼠标悬停的元素是否与editableObjects 中的字符串对象之一匹配。我的 for 循环应该检查变量中的任何匹配元素，然后在匹配时执行某些操作。但经过几个小时后，我只能让 for 循环为变量中的每个对象返回一个匹配项，无论它是否真的匹配。

【问题讨论】：

问题在于 if 语句中的 '=' 而不是 '=='。单个 '=' 是赋值运算符，而 '==' 用于比较。
也许我误解了您的意图，但是如果您需要确定何时在某些元素上触发 mouseover 事件，为什么不简单地将事件侦听器放在这些元素而不是父元素上，然后计算光标位置？即，$('.body-copy').on('mouseover',... $('.subhead').on('mouseover'... 等。
我只想将 .on 函数的第二个参数作为数组元素的选择器。
这些是动态元素，据我了解，它们需要在包含元素上委托侦听器才能在事件中触发。我试图在“.editable”类上触发鼠标悬停的委托侦听器，这是所有这些元素都会有的类，但我需要它来检查我的函数的某些类型的元素。

标签： javascript jquery arrays for-loop mouseover

【解决方案1】：

在if (m.className = o) 中使用= 分配一个值，要检查是否相等，请使用== 或===。使用内置函数也比使用循环更容易。一个简单的indexOf() 就可以解决问题：

$('#wrapper').on('mouseover', '.editable', function(event) {
    var m = getMouseElement(event);
    if (editableObjects.indexOf(m.className) > -1) {
        // ...
    }
});

或使用 es6 includes()

if (editableObjects.includes(m.className))

【讨论】：

我只是尝试将比较更改为 == 或 ===，现在没有返回任何内容。我现在假设这是我的变量/对象创建不正确的问题，但不确定。
我刚刚通过将m.classname 切换到m.localName 来获得something 工作。我可以将它与标签匹配，但还不能与类匹配。我需要能够将元素与标签列表或类匹配。

【解决方案2】：

试试这个改变：

$('#wrapper').on('mouseover', '.editable', function(event) {
  var m = getMouseElement(event);
  console.log(m.className); /*This correctly returns the tag of the 
  element under the mouse*/
  for (var c = editableObjects.length - 1; c >= 0; c--) {
     var o = editableObjects[c];
     if (m.className == o) {
        console.log(m + ' matches ' + o);
     } else {...}
   }
});

这一行：if (m.className == o) { 比较值，而你的行：if (m.className = o) { 测试它是否可以分配值......这应该会让你走上正轨。

【讨论】：

【解决方案3】：

好的，知道了。这似乎是我的变量中的元素没有被正确识别的问题，我猜是因为它们是字符串而不是对象或实际元素。 “include”方法有效：

$('#wrapper').on('mouseover', '.editable', function(event) {
var m = getMouseElement(event);
// console.log(m.className); /*This correctly returns the class of the element under the mouse*/
for (var c = editableObjects.length - 1; c >= 0; c--) {
    var o = editableObjects[c];
    if (m.className.includes(o)) {
        console.log(m + ' matches ' + o);
        // addToolTips(m);
    } else if (m.localName.includes(o)) {
        console.log(m + ' matches ' + o);
        // addToolTips(m);
    }
}
});

【讨论】：