javascript - 选择 HTML 元素 Jquery 之后的下一个 span 元素

Question

我试图在选定的 HTML 元素之后选择下一个具有类名 slider-value 的 span 元素。我尝试了多种解决方案，但没有一个有效。

我可以通过 id 选择它，但我不希望那样做使代码冗余。

$('.slider').change(function() {
  var slider = this;
  var output = $(this).closest('div').find('.slider-value').first();
  output.innerHTML = slider.value;
  slider.oninput = function() {
    output.innerHTML = this.value;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3">
  <span class="slider-text">Total Monthly Income</span>
  <input type="range" min="1" max="100" value="50" class="slider" id="salary">
  <span class="slider-value"></span>
</div>

Answer 1

output 是一个 jQuery 对象，没有 innerHTML 属性。要更新元素的内容，请改用 text()。 html() 也可以，但在这里不是必需的，因为您只用字符串值更新它。

在下面的示例中，请注意我在变量名称上使用了 $ 前缀来表示它们包含一个 jQuery 对象。我还使用了 input 事件而不是 change 以便立即更新值。

$('.slider').on('input', function() {
  var $slider = $(this);
  var $output = $slider.closest('div').find('.slider-value').first();
  $output.text($slider.val());
}).trigger('input');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3">
  <span class="slider-text">Total Monthly Income</span>
  <input type="range" min="1" max="100" value="50" class="slider" id="salary">
  <span class="slider-value"></span>
</div>