如何更改动态创建的特定类中的所有元素？

Question

当我将鼠标悬停在此类的一个元素上时，我试图突出显示使用JavaScript从数组动态创建的同一个类（person1，person2等）的所有元素。 F.E.如果我将鼠标悬停在一个带有class：person1的元素上，我希望所有带有class：person1的元素都被突出显示。主要的问题是，当我向highlightGen函数添加一个参数时，添加onmouseover（将是highlightGen（j））然后根据情况通过这个变量处理每个person1，person2，person3，该函数一起停止工作。这就是我到目前为止所提出的。

[更新]：我已经尝试了你的例子，但是当我向highlightGen函数添加参数时没有响应时会出现同样的效果。我附上了codepen，所以也许有人能够理解为什么它没有响应mouseenter。

https://codepen.io/mmsmsy/pen/zZddZz

jQuery UI功能：

function highlightGen() {
    $(this).addClass('hovered', 300);
}

function highlightGenNot() {
    $(this).removeClass('hovered', 300);
}

JavaScript循环中的部分代码从数组创建元素：

        var div = document.createElement('div');
        var divIdInitial = tree[j].name.toLowerCase();
        var find = ["ą","ć","ę","ł","ń","ó","ś","ź","ż"," "];
        var replace = ["a","c","e","l","n","o","s","z","z",""];
        var divId = divIdInitial.replaceArray(find,replace) + tree[j].genNum;
        div.setAttribute('id',divId);
        var divClass = 'person person' + tree[j].genNum;
        div.setAttribute('class',divClass);
        div.onmouseover = highlightGen;
        div.onmouseout = highlightGenNot;

Answer 1

您可以使用闭包传递另一个参数来突出显示如下：

function highlightGen(className, addOrRemove) {
    $('.' + className).toggleClass('hovered', addOrRemove); // if addOrRemove is true then add the class, else remove it (http://api.jquery.com/toggleClass/)
}

然后像这样设置事件监听器：

// ...
var theClass = 'person' + tree[j].genNum;
div.className = 'person ' + theClass;      // className is better
div.onmouseenter = function() {            // onmouseenter is better
    highlightGen(theClass, true);          // add the class
}
div.onmouseleave = function() {            // onmouseleave is better
    highlightGen(theClass, false);         // remove it
}

注1：然后您可以删除函数highlightGen，因为它现在没用了，只需将其代码直接放在事件侦听器中（由您决定）。

注2：如果您已经在使用jQuery，那么为什么不使用它来创建元素并设置它们的属性而不是使用普通的vanilla js（createElement，onmouseenter ，...）？

示例：

function highlightGen(className, addOrRemove) {
  $('.' + className).toggleClass('hovered', addOrRemove);
}

function generate() {
  var div = document.createElement("div");
  var theClass = 'person' + Math.floor(Math.random() * 3 + 1);
  div.className = 'person ' + theClass;
  div.textContent = "DIV." + theClass;
  div.onmouseenter = function() {
    highlightGen(theClass, true);
  }
  div.onmouseleave = function() {
    highlightGen(theClass, false);
  }
  return div;
}

// generate some testing divs
for(var i = 0; i < 20; i++)
  $("#container").append(generate());

.hovered {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>