jQuery更改id内给定类的css

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 的另一个 div 的子元素，它具有 .rangeslider 类。
这个是您初始 HTML 中 input type="range" 的下一个兄弟。

因此，要以输入 id 开头的句柄为目标，您可以使用 .next()，然后使用 .find()，如下面的 sn-p 所示。

为了清楚起见，我将功能放在按钮上......而且很有趣。

$(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");
  });
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.css" rel="stylesheet"/>


<div id="main">
  <input type="range" name="count" id="slider1" value="4" min="1" max="10"><br>
  <br>
  <span id="showValue">4</span><br>
  <br>
  <button id="setColor">Click me to change the handle border color</button>
</div>