在javascript中的事件处理程序

Question

检索数据时遇到问题.创建数据时,我有一个滑块,它被附加到EventListener.只有从选择框中选择了某些内容后,才会显示滑块.问题是当我以相同的方式进行回溯时,只有最后添加的项目有一个有效的EventListener.这是因为它们都是同时添加的吗？在创建数据时,会在当时创建一个事件处理程序,并在那里工作..任何帮助将不胜感激.

通过从选择列表中选择项目来添加以下HTML代码.

<div class='range-slider'>
   <span id = 'rs-bullet_skill"+ id + "' class='rs-label' > </span >
   <input id ='hidden_skillID"+id+"' class='hidden_skill' 
   name='Skills["+ minFree + "].Id' value='" + id +"' hidden >
  <input class='rs-range' type='range' id='slider_skill"+ id + "' 
  name= Skills[" + minFree + "].LevelOfSkill value='0' min='0' max='100'>
</div>

我已经检查过Ids是否类似.

function showSliderValue() 
{
    rangeBullet.innerHTML = rangeSlider.value;
    var bulletPosition = (rangeSlider.value / rangeSlider.max);
    rangeBullet.style.left = (bulletPosition * 578) + "px";
}

for (var i = 0; i < used_skill_ids.length; i++) 
{
    var rangeSlider = document.getElementById("slider_skill" + 
    used_skill_ids[i]);
    var rangeBullet = document.getElementById("rs-bullet_skill" + 
    used_skill_ids[i]);
    rangeSlider.addEventListener("input", showSliderValue, false);
}

更新选择时运行工作示例($(SelectSkills).on('change',function()..这里是从选择列表imgur.com/a/2iNC3w0添加它们时的外观图像.

问题是当添加了多个这样的列表中断时,如果有人注册了多个并且想要编辑它,就会发生这种情况.

然后我的脚本尝试一次添加它们.Markmoxx示例解决了这些操作,但现在滑块已连接(https://imgur.com/a/nsfNzEr)

前两个滑块具有上述代码.

第三和第四个有Markmoxx提出的建议:

function showSliderValue(e, rangeBullet) {
  rangeBullet.innerHTML = e.target.value;
  var bulletPosition = (e.target.value / e.target.max);
  rangeBullet.style.left = (bulletPosition * 578) + "px";
}

for (var i = 0; i < used_skill_ids.length; i++) {
  var rangeSlider = document.getElementById("slider_skill" + 
  used_skill_ids[i]);
  var rangeBullet = document.getElementById("rs-bullet_skill" + 
  used_skill_ids[i]);
  rangeSlider.addEventListener("input", function(e) {
  showSliderValue(e, rangeBullet);
  });
}

希望这是对问题的更好描述.

Answer 1

您正在通过使用var(而不是let)来遇到范围问题; 同样,每次循环都会重新定义'range*'变量.我想你想要的更像是以下内容:

for (let i = 0; i < used_ids.length; i++) {

  document
    .getElementById("slider" + used_ids[i])
    .addEventListener(
      "input",
      () => {
        let
          rangeBullet = document.getElementById("rs-bullet" + used_ids[i]),
          rangeSlider = document.getElementById("slider" + used_ids[i]);

        rangeBullet.textContent = rangeSlider.value;
        rangeBullet.style.left = ((rangeSlider.value / rangeSlider.max) * 578) + "px";
      }
    );
}