jQuery 更改 css of given class within an id

Question

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

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

$.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 class.

的元素之后

此元素是另一个 div 的 div 子元素，后者具有 .rangeslider class.
而这个是您最初 HTML.

input type="range" 的下一个兄弟姐妹

因此，要定位从输入 id 开始的句柄，您可以使用 .next()，然后使用 .find()，如下面的代码片段所示。

为了清晰...和有趣，我将功能放在按钮上。

$(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>

jQuery 更改 css of given class within an id

jQuery change css of given class within an id

css

jquery

find

ancestor