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

回答

相關問題