我试图在选定的 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>
最佳答案
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>
关于javascript - 选择 HTML 元素 Jquery 之后的下一个 span 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59246172/