jQuery改变给定类中的css

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

该语法不能改变给定id中仅该类的边界。我也试过jQuery改变给定类中的css

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

来源

2017-03-06 Roberto

'$（ '＃slider1 .rangeslider__handle'）的CSS（{ “边界”， “4PX固体＃99cc44”}）;'看大括号 – Psi

是在此之后脚本执行该元素是创建的还是动态创建的元素？一个简单的方法来检查你是否真的选择了什么，只是在浏览器开发工具中使用JavaScript控制台。只需输入选择部分'$（'＃slider1 .rangeslider__handle'）'，控制台应打印jQuery结果。 –

适用于我：https：//jsfiddle.net/barmar/nm069xhz/4/ – Barmar

使用命名"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>

来源

2017-03-06 07:30:22

谢谢，Louys，是的，这是完美的作品 – Roberto

太棒了！然后，考虑接受答案（绿色复选标记）。 ;） –

现在我收到了这条信息，但是当系统让我再次说：“感谢您的反馈！记录下名声低于15的人的投票记录，但不会更改公开显示的帖子分数。 – Roberto

jQuery改变给定类中的css

回答

相关问题