jQuery는 id 내 주어진 클래스의 CSS를 변경합니다.

Question

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

해당 ID 내에서 해당 클래스의 경계 만 변경하는 구문은 작동하지 않습니다. 나는 당신이 "Range Slider"라는 이름의 플러그인을 사용하고 또한

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

을 시도했다.

여러분은 .rangeslider__handle 클래스를 가진 요소 다음에 있기 때문에 멋진 시각 효과를 얻기 위해 플러그인이 새로운 요소를 생성한다는 것을 눈치 챘을 것입니다.

이 요소는 .rangeslider 클래스를 갖는 div의 다른 자식 인 div입니다.
그리고 이것은 첫 번째 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>