$('#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");
最佳答案
您正在使用名为 "Range Slider" 的插件.
您肯定注意到插件会创建新元素以实现漂亮的视觉效果,因为您是在具有 .rangeslider__handle
类的元素之后。
此元素是另一个 div
的 div
子元素,它具有 .rangeslider
类。
这是您初始 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 在 id 中更改给定类的 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42615568/