如何 - VoidCC

您好我使用這是在鏈接Change color of selected section in bootstrap slider的一個表現出相同的應用程序，以更改所選部分的顏色引導滑塊。即使我使用相同的，我不能夠繼續。你可以請參閱，讓我知道我做了錯誤的解決方案。我已經下載必要的.js和.css文件到我的系統，並在我的html頁面引用它們。這是我使用的反饋類型的滑塊。當用戶選擇1至5，滑動器應該顯示「紅」顏色（OK）幾個問題將與來自110個選擇遵循至10，當其在6至8「橙」（良好）和圖9至10是示出了「綠色」（優秀）。請找到我的下面的代碼，並幫助我。在此先感謝如何

<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap-slider.js"></script> 
<link href="js/bootstrap-slider.css" rel="stylesheet"> 
<link href="js/bootstrap.min.css" rel="stylesheet"> 

<style> 
#score .slider-selection { 
    background: yellow; 
} 
</style> 

<script> 
    var r = $('#score').slider() 
     .on('slideStart', RGBChange) 
     .data('slider'); 

    var RGBChange = function() { 
     alert("called"); 
     if(r.getValue() >= 1 && r.getValue() <=5){ 
     $('.slider-selection').css('background', 'red'); 
     document.getElementById("lbl").value = r.getValue(); 
     } 
     else if(r.getValue() > 5 && r.getValue() <=8){ 
     $('.slider-selection').css('background', 'orange'); 
     document.getElementById("lbl").value = r.getValue(); 
     } 
     else if(r.getValue() >= 1 && r.getValue() <=5) 
    }; 
</script> 

<input 
    type="text" 
    Id = "score" 
    name="scoreSlide" 
    data-provide="slider" 
    data-slider-ticks="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" 
    data-slider-ticks-labels='["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]' 
    data-slider-min="1" 
    data-slider-max="10" 
    data-slider-step="1" 
    data-slider-value="3", 
    data-slider-tooltip="hide" 
    /><br> 
    <input type="text" ID="lbl" />

來源

2016-11-14 Sid

你能提供一個JSFiddle（或類似的東西）鏈接嗎？ – tugce

以下代碼不會執行您提問。不過，我不認爲它看起來很棒與淡藍色手柄/按鈕。

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> 
    <script src="http://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script> 
    <link href="http://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet"> 
    <link href="http://seiyria.com/bootstrap-slider/dependencies/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body> 
<input 
type="text" 
Id = "score" 
name="scoreSlide" 
data-provide="slider" 
data-slider-ticks="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" 
data-slider-ticks-labels='["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]' 
data-slider-min="1" 
data-slider-max="10" 
data-slider-step="1" 
data-slider-value="3" 
data-slider-tooltip="hide" 
/> 
<input type="text" id="lbl" /> 
<script> 
var r = $('#score').slider() 
    .on('slideStop', function(ev){ 
    var value = r.getValue(); 
     if(value >= 1 && value <= 5){ 
      $('.slider-selection').css('background', 'red'); 
     } 
     else if(value > 5 && value <= 8) { 
      $('.slider-selection').css('background', 'orange'); 
     } 
     else if(value > 8 && value <= 10) { 
      $('.slider-selection').css('background', 'green'); 
     } 
     $('#lbl').val = value; 
    }) 
    .data('slider'); 
</script> 
</body> 
</html>

來源

2016-11-14 05:51:42 varlogtim

如何

回答

相關問題