jquery 슬라이더 배경색

나는 웹 프로그래밍에 익숙하지 않으며 슬라이더가있는 웹 사이트를 만들려고합니다. 현재 jquery를 사용하여 슬라이더를 만듭니다. 슬라이더 값이 5보다 작 으면 슬라이더의 배경색을 빨간색으로 변경하고 5보다 큰 경우 녹색으로 변경하려고합니다. 어떻게 수행합니까? 이 작업을 수행하려면 CSS를 사용해야합니까? 그렇다면 jQuery 코드와 함께 CSS를 어떻게 통합해야합니까?jquery 슬라이더 배경색

편집 내가 #ff0000에 background-color 속성을 슬라이더 요소() .CSS 사용 설정했지만 문제가 해결되지 않은 :

여기에 지금까지 내 진행합니다.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Slider - Range with fixed maximum</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script> 
    $(function() { 
    $("#slider-range-max").slider({ 
     range: "min", 
     min: 0, 
     max: 10, 
     value: 0, 
     step: .001, 
     slide: function(event, ui) { 
     $("#amount").val(ui.value); 
     if(ui.value < 5){ 
      $("#amount").attr("style","border:0; color:#ff0000; font-weight:bold;"); 
      $("#slider-range-max").css("background-color","#ff0000"); 
     } 
     else 
      $("#amount").attr("style","border:0; color:#00ff00; font-weight:bold;"); 

     } 
    }); 
    $("#amount").val($("#slider-range-max").slider("value")); 
    }); 
    </script> 
</head> 
<body> 

<p> 
    <label for="amount">Trust Value:</label> 
    <input type="text" id="amount" style="border:0; color:#ff0000; font-weight:bold;"> 
</p> 
<div id="slider-range-max"></div> 


</body> 
</html>

출처

2014-01-29 AndroidDev93

jQuery를 UI는 당신의 재산 background-color보다 더 중요 재산 background을 사용합니다. $("#slider-range-max").css("background-color","#ff0000");을 $("#slider-range-max").css("background","#ff0000");으로 변경하면 제대로 작동합니다. 또한

, 당신의 else 문에 배경 변경을 넣어하는 것을 잊지 마세요, 그렇지 않으면이 금액이 더 이상 5.

출처

2014-01-29 01:16:56 linkboss

봐 경우에도, 빨간있을 게요 : jsFiddle가. 필요한 경우이 방법이 효과가 있는지 확인하십시오.

$(function() { 
    $("#slider-range-max").slider({ 
     range: "min", 
     min: 0, 
     max: 10, 
     value: 0, 
     step: .001, 
     slide: function(event, ui) { 
     $("#amount").val(ui.value); 
     if(ui.value < 5){ 
      $("#amount").attr("style","border:0; color:#ff0000; font-weight:bold;"); 
      $('#slider-range-max').removeClass('green'); 
      $('#slider-range-max').addClass('red'); 

     } 
     else{ 
      $("#amount").attr("style","border:0; color:#00ff00; font-weight:bold;"); 
      $('#slider-range-max').removeClass('red'); 
      $('#slider-range-max').addClass('green'); 
     } 

     } 
    }); 
    $("#amount").val($("#slider-range-max").slider("value")); 
    }); 


.ui-widget-header{ 
    background: none; 
} 
.red .ui-slider-range { 
    background-color: #ff0000; 
} 
.green .ui-slider-range { 
    background-color: #00ff00; 
}

출처

2014-01-29 01:19:38 Siva

이와 같이 if 문을 사용하십시오. 기본 색상은 빨간색이어야하며 (# ff0000) #amount 값이 5보다 크면 색상이 녹색으로 움직입니다.

if($('#amount').val(); > 5){ 
    $('#amount').animate({"color":"#00ff00"}, 1000); 
}else{ 
    $('#amount').animate({"color":"#ff0000"}, 1000);

다른 방법 대신 애니메이션의 녹색으로 즉시 변경하는 $('#amount').css("color":"#00ff00");를 사용할 수 있습니다.

빠른 팁 : jQuery 선택기에 작은 따옴표를 사용하십시오. 큰 따옴표를 사용하면 일부 선택자는 $("#elem[type="text"]")과 같이 중단됩니다. 왜냐하면 첫 번째 닫힌 인용 부호가있는 열린 따옴표가 끝나기 때문입니다.

출처

2014-01-29 01:21:37 user2687646

jquery 슬라이더 배경색

답변

관련 문제