Question

我开始在站点内创建一些次要代码，并且希望进行一些动态创建，因此使用JavaScript for循环创建了一些span标签。在相同的代码中，但是在不同的循环中，我想向标签添加事件监听器。我得到的错误是创建的元素不存在，我有一些想法为什么它不起作用，但是搜索了Web和堆栈溢出没有给我答案。

我已经考虑过将for循环都放入一个函数中，并以类似的方式调用该函数jQuery与它的文档就绪函数一起工作。但是我认为这不会解决问题

var country = ["is_AmericaN", "is_Europe", 
"is_Africa","is_AmericaS","is_Asia","is_Australia"];

var spanInto = document.getElementById("spanSelect");

for(i=0; i<6; i++)
{
var spanMake = document.createElement("SPAN");

spanInto.appendChild(spanMake);

spanMake.className += "spanLanguage" + " " + country[i];
}

上面的代码创建元素，下面的代码尝试调用它们

var countryClass = doucment.getElementsByClassName("spanLanguage");
for(i=0; i< document.countryClass.length; i++)
{
countryClass[i].addEventListener("click", function(){

var hrDisplay = document.getElementById("selectiveDisplay");

hrDisplay.removeAttribute("id");

hrDisplay.className = "noDisplay";

},false);
}

我希望工作代码一旦单击任何span标签，就将hr标签的显示设置为block或flex。我不想手动创建5-6个span标签，它必须是动态创建。

Answer 1

您缺少添加类的位置

var spanMake = document.createElement("SPAN");

spanInto.appendChild(spanMake);

spanMake.className += "spanLanguage" + " " + country[i];

在这里，您是在将类追加到span之后分配类的，这是错误的，您需要在之前分配类。

var countryClass = doucment.getElementsByClassName("spanLanguage");
for(i=0; i< document.countryClass.length; i++)
{

doucment是document，而document.countryClass应该是countryClass，因为您已经有了该元素的实例

var country = ["is_AmericaN", "is_Europe",
  "is_Africa", "is_AmericaS", "is_Asia", "is_Australia"
];

var spanInto = document.getElementById("spanSelect");

for (i = 0; i < 6; i++) {
  var spanMake = document.createElement("SPAN");
  spanMake.textContent = country[i];
  spanMake.className += "spanLanguage" + " " + country[i];
  spanInto.appendChild(spanMake);


}

var countryClass = document.getElementsByClassName("spanLanguage");
for (i = 0; i < countryClass.length; i++) {
  countryClass[i].addEventListener("click", function() {

    var hrDisplay = this;

    hrDisplay.removeAttribute("id");

    hrDisplay.className = "noDisplay";

  }, false);
}

.noDisplay {
  display: none;
}

<span id="spanSelect"></span>
<br/>
//click on any of them to replace the class

Answer 2

有多个要纠正的地方：

您的代码中有一个“怀疑”类型。请改用“文档”。
创建的元素上没有任何文本，您怎么称呼click 元素在DOM中不可见时显示。
事件附加到锚点/按钮上，而不是跨度。
不确定是否要通过附加事件来做什么。

下面是当您尝试在动态创建的元素上添加事件时适合您的代码段。如果您需要进一步的帮助，请告诉我

function temp() {
  var country = ["is_AmericaN", "is_Europe",
    "is_Africa", "is_AmericaS", "is_Asia", "is_Australia"
  ];

  var spanInto = document.getElementById("spanSelect");

  for (i = 0; i < 6; i++) {
    var spanMake = document.createElement("a");
    spanMake.innerHTML = country[i];
    spanInto.appendChild(spanMake);

    spanMake.className += "spanLanguage" + " " + country[i];
  }
}

function attachEvent() {
  var countryClass = document.getElementsByClassName("spanLanguage");
  for (i = 0; i < countryClass.length; i++) {
    countryClass[i].addEventListener("click", function(event) {
      console.log("I am called" + event.target);
      //var hrDisplay = document.getElementById("selectiveDisplay");

      //hrDisplay.removeAttribute("id");

      //hrDisplay.className = "noDisplay";

    }, false);
  }
}

a {
  padding: 20px;
}

<body>
  <div id="spanSelect"></div>
  <div id="selectiveDisplay"> </div>
  <button onclick="temp()"> Call Me </button>
  <button onclick="attachEvent()"> Attach Event </button>
</body>

如何从动态创建的元素获取元素类名称？

2 个答案: