jQuery在id

Question

$('#slider1 .rangeslider__handle').css("border", "4px solid #99cc44");

该语法不适用于更改给定id中该类的边框。 我也试过了

$.fn.hasAncestor = function(a) {
    return this.filter(function() {
        return !!$(this).closest(a).length;
    });
};
$('.rangeslider__handle').hasAncestor('#slider1').css("border", "4px solid #99cc44").change();

和

$('#slider1').find('.rangeslider__handle').css("border", "4px solid #99cc44");

Answer 1

您正在使用名为"Range Slider"的插件。

您当然注意到插件会创建新元素以实现良好的视觉效果，因为您的元素位于具有.rangeslider__handle类的元素之后。

此元素是另一个div的{​​{1}}孩子，其div类。{
这个是您最初的HTML中.rangeslider的下一个兄弟。

因此，要定位输入input type="range"的句柄，您可以使用id然后使用.next()，如下面的代码段所示。

为了清晰起见，我已将功能放在一个按钮上......很有趣。

＆＃13;

＆＃13;

.find()

＆＃13;

$(document).ready(function(){
 var sliderValueShow = $("#showValue");
     
  $('#slider1').rangeslider({
    polyfill: false,
    onSlide: function(position, value) {
      sliderValueShow.html(value);
    },
    onSlideEnd: function(position, value) {
      sliderValueShow.html(value);
    }
  });

  // Change the handle border color
  $("#setColor").click(function(){
    $('#slider1').next().find('.rangeslider__handle').css("border", "4px solid #99cc44");
  });
});

＆＃13;

#main{
  text-align:center;
  padding:20px;
}
#showValue{
  font-size:3em;
}
button{
  border-radius:10px;
  background-color:cyan;
  padding:6px;
  outline:none;
}

＆＃13;

＆＃13;

＆＃13;