javascript - jQuery更改父级同级div中内容的值

尝试在滑块父级同级内分配范围滑块值

var rangeSlider = function() {
    var slider = $('.range-slider'),
      range = $('.range-
        value = $('.range-slider__value');

        slider.each(function() {

          value.each(function() {
            var value = $(this).prev().attr('value');
            $(this).html(value);
          });

          range.on('input', function() {
            $(this).parents.siblings(value).html(this.value);
          });
        });
      };

    rangeSlider();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <h3 class="range-slider__value">0</h3>
  </li>
</ul>

<div class="range-slider">
  <input class="range-slider__range" type="range" value="100" min="0" max="500">
</div>

我添加了一个Codepen here

最佳答案

我改变了你的codepen，看看这个

 var rangeSlider = function(){
      var slider = $('.range-slider'),
          range = $('.range-slider__range'),
          value = $('.range-slider__value');

      slider.each(function(){

        value.each(function(){
          var value = $(this).prev().attr('value');
          $(this).html(value);
        });

        range.on('change', function(){
          $(this).parents().find(value).html(this.value);
        });
      });
    };

    rangeSlider();