Question

我正在尝试创建一个包含2个段落的网页，并且给了他们2个不同的类。使用JavaScript，我创建了一个函数，单击该函数将其类更改为相同的类。我想执行一个函数，当单击后两个段落的类都相同时，它将更改一个段落的文本。

var firstPara = document.getElementById('firstPara');
var secondPara = document.getElementById('secondPara');

function changeClass1() {
firstPara.classList.remove("class1");
firstPara.classList.add("sameClass");
}

function changeClass2() {
secondPara.classList.remove("class2");
secondPara.classList.add("sameClass");
}

var class1 = firstPara.className;
var class2 = secondPara.className;

function changeText() {
   if (class1 === class2) {
   firstPara.innerHTML = "The text is changed!";
 }
}
changeText();

<p id="firstPara" class="class1" onClick="changeClass1()"> This is first Paragraph. </p>
<p id="secondPara" class="class2" onClick="changeClass2()"> This is second Paragraph. </p>

要知道段落的类已更改，我使用CSS为所有类赋予了不同的文本颜色。当我单击段落时，它们的颜色会更改，即它们的类也会更改，但是当我单击两个段落时，它们的颜色会更改，即它们具有相同的类，则更改文本的最后一个功能不会执行。我是JavaScript的初学者，对此我不太了解。谁能告诉我这个问题的解决方案，为什么函数不执行？

Answer 1

您需要在每个onClick事件之后调用changeText函数，以查看是否进行了某些更改。同样，存储类名称的变量也应该在函数内。

示例：

var firstPara = document.getElementById('firstPara');
var secondPara = document.getElementById('secondPara');

function changeClass1() {
  firstPara.classList.remove("class1");
  firstPara.classList.add("sameClass");
  changeText();
}

function changeClass2() {
  secondPara.classList.remove("class2");
  secondPara.classList.add("sameClass");
  changeText();
}

function changeText() {
  const class1 = firstPara.className;
  const class2 = secondPara.className;

  if (class1 === class2) {
    firstPara.innerHTML = "The text is changed!";
  }
}

<p id="firstPara" class="class1" onClick="changeClass1()"> This is first Paragraph. </p>
<p id="secondPara" class="class2" onClick="changeClass2()"> This is second Paragraph. </p>

如何使两个元素的类相等时执行的函数？

1 个答案: