.on（）方法子选择器不工作

Question

我在一个页面上有多个范围输入，我希望每个范围的输出实时更新到特定元素：因此第一个反馈滑块会将其值输出到带有id“feedbackOne”和第二个反馈滑块将其值输出到“feedbackTwo”。目前，似乎没有任何事情发生，但如果我改变我的功能看起来像这样：

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

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

然后当然第一个滑块的输出有效，但也会受到第二个滑块的影响。

$(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>

Answer 2

保持简洁！你真的只需要编写以下JavaScript

$(function()
{
  $(document).on("change", 'input[type=range]', function()
  { 
    with($(this)) parent().prev().text(val());
  });
});

一切都应该没问题。这假定你的html中有某种结构。为了使其更加灵活，您可以将parent()转换为closest()并使其更具体。

设置.on()事件监听器以监听所有传入的输入＆＃39;任何类型＆＃39;范围＆＃39;的输入元素上的事件。它将相对于相关的输入元素执行其工作。没有必要摆弄笨重的Ids。

Answer 3

您应该使用$(document).on("click", "#feedBackSliderOne", function(x) {并且我已将您的click个事件合并为一个：

$(function() {
  $(document).on("click", "#feedBackSliderOne, #feedBackSliderTwo", function(x) {
    if ($(this).attr('id') == 'feedBackSliderOne')
      $("#feedbackOne").text(x.currentTarget.value);
    else
      $("#feedbackTwo").text(x.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>

Answer 4

试试这个：

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

$(document).on("input", "#feedbackSecond input[type='range']", function(y)
{
    outputTwo.innerHTML = y.currentTarget.value;
});