仅对特定值的jQuery UI滑块做一些非凡的事情

Question

I want change inner html and class when user slide into a specific value. 当用户滑入特定值时，我想更改内部html和class。 let's say we have slider with max:101, value. 假设我们有一个滑块with max:101,值。 Now when user slide into 101, user will get a alert box or a prompt or get some text changed. 现在，当用户滑入101时，用户将看到一个警告框或提示，或者更改了一些文本。 Here is the fiddle and snippet: 这是小提琴和摘录：

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

Answer 1

Maybe I'm misunderstanding your question, but it seems like you could just test for when ui.value === 101 : 也许我误会了您的问题，但是似乎您可以测试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>

仅对特定值的jQuery UI滑块做一些非凡的事情

问题描述

1 个解决方案

解决方案1
2 2016-03-03 19:16:05

仅对特定值的jQuery UI滑块做一些非凡的事情

问题描述

1 个解决方案

解决方案1 2 2016-03-03 19:16:05

解决方案1
2 2016-03-03 19:16:05