javascript - .on() 方法子选择器不工作

Question

我在一个页面上有多个范围输入，我希望每个范围的输出实时更新到特定元素:因此第一个反馈 slider 会将其值输出到 ID 为“feedbackOne”的第二个反馈 slider 会将它的值输出到“feedbackTwo”。目前，似乎什么都没有发生，但如果我将函数更改为如下所示:

var outputOne = document.querySelectorAll("output")[0];

$(document).on("input", "input['type=range']", function(x)
  {
    outputOne.innerHTML = x.currentTarget.value;
  });

当然第一个 slider 的输出有效，但也受到第二个 slider 的影响。

$(function()
{
  //Query DOM for specific <output> elements
  var outputOne = document.querySelectorAll("#feedbackOne")[0];
  var outputTwo = document.querySelectorAll("#feedbackTwo")[0];
  //Dynamically update DOM with output value
  $(document).on("input", "feedbackSliderOne", function(x)
  {
    outputOne.innerHTML = x.currentTarget.value;
  });

  $(document).on("input", "feedbackSliderTwo", function(y)
  {
    outputOne.innerHTML = y.currentTarget.value;
  });
});

#feedbackSliderContainer
{
  position: relative;
  top: -20px;
  margin: auto;
  width: 80%;
}

#feedbackOne
{
  position: relative;
  top: 0px;
  color: #58a7dd;
}

#feedbackTwo
{
  position: relative;
  top: 60px;
  color: #58a7dd;
}

#feedbackFirst
{
  position: relative;
  top: 30px;
  width: 100%;
}

#feedbackSecond
{
  position: relative;
  top: 90px;
  width: 100%;
}

.easy
{
  position: relative;
  top: 10px;
  text-align: left;
}

.hard
{
  position: relative;
  top: -12px;
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="feedbackSliderContainer">
    <!--Feedback One-->
    <output id="feedbackOne">2</output>
    <div id="feedbackFirst">
       <input type="range" id="feedBackSliderOne" class="ranger" min="0" value="2" max="4" />
      <div class="easy">EASY</div>
      <div class="hard">HARD</div>
    </div>
    <!--Feedback Two-->
    <output id="feedbackTwo">2</output>
    <div id="feedbackSecond">
      <input type="range" id="feedBackSliderTwo" class="ranger" min="0" value="2" max="4" />
      <div class="easy">TOO<br />SLOW</div>
      <div class="hard" style="top: -35px;">TOO <br />FAST</div>
    </div>
  </div>

Answer 1

您的代码存在一些问题:

使用 id 的选择器返回单个元素，而不是数组。$(document).on("input", "feedbackSliderOne", function(x)，该选择器将不起作用，因为没有名为 feedbackSliderOne 的标签，您需要提供一些像 #feedBackSliderOne 这样的 id。

$(function()
{
  //Query DOM for specific <output> elements
  var outputOne = $("#feedbackOne");
  var outputTwo = $("#feedbackTwo");
  //Dynamically update DOM with output value
  $(document).on("input", "#feedBackSliderOne", function(x)
  {
    outputOne.text(x.currentTarget.value);
  });

  $(document).on("input", "#feedBackSliderTwo", function(y)
  {
    outputTwo.text(y.currentTarget.value);
  });
});

#feedbackSliderContainer
{
  position: relative;
  top: -20px;
  margin: auto;
  width: 80%;
}

#feedbackOne
{
  position: relative;
  top: 0px;
  color: #58a7dd;
}

#feedbackTwo
{
  position: relative;
  top: 60px;
  color: #58a7dd;
}

#feedbackFirst
{
  position: relative;
  top: 30px;
  width: 100%;
}

#feedbackSecond
{
  position: relative;
  top: 90px;
  width: 100%;
}

.easy
{
  position: relative;
  top: 10px;
  text-align: left;
}

.hard
{
  position: relative;
  top: -12px;
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="feedbackSliderContainer">
    <!--Feedback One-->
    <output id="feedbackOne">2</output>
    <div id="feedbackFirst">
       <input type="range" id="feedBackSliderOne" class="ranger" min="0" value="2" max="4" />
      <div class="easy">EASY</div>
      <div class="hard">HARD</div>
    </div>
    <!--Feedback Two-->
    <output id="feedbackTwo">2</output>
    <div id="feedbackSecond">
      <!--<p id="feedTwo"></p>-->
      <input type="range" id="feedBackSliderTwo" class="ranger" min="0" value="2" max="4" />
      <div class="easy">TOO<br />SLOW</div>
      <div class="hard" style="top: -35px;">TOO <br />FAST</div>
    </div>
  </div>