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

Question

当悬停在此类中的一个元素上时，我试图突出显示使用 JavaScript 从数组中动态创建的同一类的所有元素（person1、person2 等）。 F.e.如果我将鼠标悬停在带有 class: person1 的元素上，我希望所有带有 class: person1 的元素都被突出显示。主要问题是，当我将参数添加到添加 onmouseover 的 highlightGen 函数（将是 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，那么为什么不使用它来创建元素并设置它们的属性，而不是使用普通的 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>