Question

我在容器div中定义了许多滑块，如

  <div id="opacitySlider" class='slider'>
    <div class="sliderText">Fade Opacity</div>
    <div id="fadeVal"></div>
  </div>

还有更多

它们由定义为

的jQuery UI slider()功能控制

$(".slider").each(function(e){
  $(this).slider({
    value: 50,
    orientation: 'horizontal',
    animate: true,
    range: 'min',
    slide: function(e, ui){
      console.log($(e).id);
      console.log($(this).id;
    }
  });
});

我想要做的是使用相关滑块的值更新滑块值div

控制台日志记录语句都返回undefined。我需要知道滑块的ID，它触发事件以更新正确的div元素。我怎么能这样做？

Answer 1

.each()有两个参数，第一个是索引，第二个是元素：

$(".slider").each(function(i, e) {
    $(e).slider({
        value: 50,
        orientation: 'horizontal',
        animate: true,
        range: 'min',
        slide: function(e, ui) {
            console.log(this.id); //new scope
        }
    });
});

仅执行$(".slider").each(function(e) {...}时，e将是索引而不是元素，因此您尝试获取数字0,1,2等的ID。

Answer 2

应该是 $(this).attr('id');或$(e).attr('id');

Answer 3

试试这个：

$(".slider").each(function(e){

  var curSlider = $(this);

  $(this).slider({
    value: 50,
    orientation: 'horizontal',
    animate: true,
    range: 'min',
    slide: function(e, ui){

      console.log(curSlider.attr('id'));

    }
  });
});

Answer 4

使用id或this的{{1}}属性：

e.target

jsFiddle

获取在jQuery.each（）中激活的滑块元素的ID

4 个答案: