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>

我检查了ID是否相似。

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";
      }
    );
}

Answer 2

这是因为在执行循环时，在上一次迭代时，它将rangeBullet的值设置为document.getElementById("rs-bullet_skill" + used_skill_ids[used_skill_ids.length - 1])，并且与rangeSlider相似。因此，当在任何rangeSliders上调用事件侦听器时，它会将上次迭代中的值用于变量rangeBullet和rangeSlider。

使用内联函数可能会更好，因此可以将参数传递给showSliderValue函数，如下所示：

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);
    });
}

javascript中的事件处理程序

2 个答案: