做一些特殊的事情只有一個特定的價值jQuery UI滑塊

我想要更改內部HTML和類時，用戶滑入一個特定的值。假設我們有滑塊with max:101,的值。現在，當用戶滑入101時，用戶將得到一個警告框或提示或改變一些文本。這裏是fiddle和摘要：做一些特殊的事情只有一個特定的價值jQuery UI滑塊

$(function() { 
 
     $("#slider").slider({ 
 
      min: 1, 
 
      range: false, 
 
      step: .01, 
 
      max: 101, 
 
      value: 1, 
 
      animate:"slow", 
 
      orientation: "horizontal", 
 
      slide: function(event, ui) { 
 
       $(".value").text("slider value: " + Math.round(ui.value)); 
 
       
 
      } 
 
     }); 
 
    });

body { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    background-color: #333; 
 
    color: #FFF; 
 
    font-family: arial; 
 
    font-size: 20px; 
 
} 
 
.slider-holder { 
 
    padding: 15px; 
 
    margin: 0px; 
 
} 
 
.value { 
 
    margin: 15px 0px 0px 0px; 
 
    display: inline-block; 
 
}

<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="slider-holder"> 
 
     <div id="slider"></div> 
 
     <a class="value">slider value: 1</a> 
 
    </div> 
 
</body> 
 
</html>

來源

2016-03-03 Shohidul Alam

也許我誤解你的問題，但似乎你可以只測試時ui.value === 101：

$(function() { 
 
     $("#slider").slider({ 
 
      min: 1, 
 
      range: false, 
 
      step: .01, 
 
      max: 101, 
 
      value: 1, 
 
      animate:"slow", 
 
      orientation: "horizontal", 
 
      slide: function(event, ui) { 
 
       $(".value").text("slider value: " + Math.round(ui.value)); 
 
       if (Math.round(ui.value) === 101) { 
 
        alert('something extraordinary!') 
 
       } 
 
      } 
 
     }); 
 
    });

body { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    background-color: #333; 
 
    color: #FFF; 
 
    font-family: arial; 
 
    font-size: 20px; 
 
} 
 
.slider-holder { 
 
    padding: 15px; 
 
    margin: 0px; 
 
} 
 
.value { 
 
    margin: 15px 0px 0px 0px; 
 
    display: inline-block; 
 
}

<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="slider-holder"> 
 
     <div id="slider"></div> 
 
     <a class="value">slider value: 1</a> 
 
    </div> 
 
</body> 
 
</html>

來源

2016-03-03 19:16:05

感謝@Nathan朋友的幫助。 –

我可以得到ab字符串而不是像101那樣的數字值嗎？ –

結果應該像slider值：ab –

做一些特殊的事情只有一個特定的價值jQuery UI滑塊

回答

相關問題