javascript动态添加类而不使用内联函数

Question

我正在研究一个简单的示例，如果用户单击元素，则其上方的所有元素都应该有一个类，而其下方的所有元素不应应用任何类。

这是我的代码:

<style>
p {
  background-color: skyblue;
  text-align: center;
  color: white;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.active {
  color: red;
  background-color: black;
}

</style>

<div id="divid">
  <p id="p1">one</p>
  <p id="p2">two</p>
  <p id="p3">three</p>
  <p id="p4">four</p>
</div>
<script>

function myFunction(index) {
    for (let i = 0; i <= index; i++) {
        paragraphs[i].classList.add('active');
    }
    for (let i = index; i < paragraphs.length; i++) {
        paragraphs[i].classList.remove('active');
    }
}

var paragraphs = document.querySelectorAll("p");
console.log(paragraphs);
for(var j=0;j<paragraphs.length; j++) {
    paragraphs[j].addEventListener("click", myFunction(j));
}

</script>

当我运行此代码时，它直接将类事件设置为前 3 个段落标记，这不是预期的行为，而且单击功能也不起作用。

如果我用内联函数替换 javascrip 代码，它就可以正常工作。

var paragraphs = document.querySelectorAll("p");
console.log(paragraphs);
for(var j=0;j<paragraphs.length; j++) {
    paragraphs[j].addEventListener("click", (function(index) {
    return function() {
         for (let i = 0; i <= index; i++) {
            paragraphs[i].classList.add('active');
        }
        for (let i = index; i < paragraphs.length; i++) {
            paragraphs[i].classList.remove('active');
        }
    }
  })(j));
}

如果我将其作为外部函数放置，您能帮我看看我的代码有什么问题吗？

Answer 1

addEventListener 中的

myFunction(j) 将立即执行该函数。仅将其替换为 myFunction。 myFunction 将获取 event 对象。从事件对象中，您可以获得目标，这对于获取子元素的索引很有用。

您可以调整 m 值的迭代，以在所需元素中添加或删除类

function myFunction(index) {
  // this will first create an array of all the child elmenets
  // then the indexOf will get the index of the child which was clicked
  let m = Array.from(index.target.parentNode.children).indexOf(index.target);
  for (let i = 0; i < m; i++) {
    paragraphs[i].classList.add('active');
  }
  for (let i = m + 1; i < paragraphs.length; i++) {
    paragraphs[i].classList.remove('active');
  }
}

var paragraphs = document.querySelectorAll("p");

for (var j = 0; j < paragraphs.length; j++) {
  paragraphs[j].addEventListener("click", myFunction);
}

p {
  background-color: skyblue;
  text-align: center;
  color: white;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.active {
  color: red;
  background-color: black;
}

<div id="divid">
  <p id="p1">one</p>
  <p id="p2">two</p>
  <p id="p3">three</p>
  <p id="p4">four</p>
</div>