[英]Assign input box value from another input box on select click in jquery
[英]Not Updating setTimeout() value on click from input box
這是一個 JS slider,它每 2 秒從值為
<input style="width:50px;" type="text" id="rrrr" value="2000">
但是第一次當 HTML 渲染 slider 時正確地取值。
但是在 HTML 渲染更新值之后
<input style="width:50px;" type="text" id="rrrr" value="2000">
不會改變 slider 速度。
我試過這個但它不工作..
var iHandle = 0;
$(document).ready(function() {
//
// read initial value:
//
var delay = document.getElementById("rrrr").value;
//
// set initial interval:
//
iHandle = window.setInterval(function() {
// console.log(delay);
function next()
}, delay);
//
// change delay by user trigger (pressing on button):
//
$("#speedbutton").on("click", function () {
//
// clear previous setInterval() object if existent:
//
if(iHandle) {
clearInterval(iHandle);
}
//
// read new value:
//
var delay = document.getElementById("rrrr").value;
//
// set new interval:
//
iHandle = window.setInterval(function() {
console.log(delay);
function next()
}, delay);
});
});
我的目標是在更改輸入框值后更改 slider 速度並單擊<button id="speedbutton">Change Speed</button>
(例如:1000、3000、5000)
我的 Slider 整個代碼是:
$(document).ready(function () { $('.sp').first().addClass('active'); $('.sp').hide(); $('.active').show(); var t = 0; var delay = document.getElementById("rrrr").value; function next() { clearTimeout(t); if (document.visibilityState === 'visible') { $('.active').removeClass('active').addClass('oldActive'); if ($('.oldActive').is(':last-child')) { $('.sp').first().addClass('active'); } else { $('.oldActive').next().addClass('active'); } $('.oldActive').removeClass('oldActive'); $('.sp').fadeOut(); $('.active').fadeIn(); } t = setTimeout(next, delay) } function prev() { clearTimeout(t); if (document.visibilityState === 'visible') { $('.active').removeClass('active').addClass('oldActive'); if ($('.oldActive').is(':first-child')) { $('.sp').last().addClass('active'); } else { $('.oldActive').prev().addClass('active'); } $('.oldActive').removeClass('oldActive'); $('.sp').fadeOut(); $('.active').fadeIn(); } t = setTimeout(next, delay) } $('#button-next').click(next); $('#button-previous').click(prev); t = setTimeout(next, delay) });
body{font-size:12px; font-family: 'Verdana';} #page-wrapper{margin: 0 auto;position: relative;width: 500px;} #slider-wrapper {width:300px; height:200px;} #slider {width:300px; height:200px; position:relative;}.sp {width:300px; height:200px; position:absolute; font-size:20px; color:#fff;} #nav {margin-top:20px; width:50%;} #button-previous {float:left; cursor:pointer;} #button-next {margin-left: 250px;important:cursor;pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div id="page-wrapper"> <div id="slider-wrapper"> <div id="slider"> <div class="sp" style="background: blue;">1</div> <div class="sp" style="background: yellow;">2</div> <div class="sp" style="background: green;" >3</div> <div class="sp" style="background: red;">4</div> </div> </div> <div id="nav"></div> <div id="button-previous">prev</div> <div id="button-next">next</div> </div> <br> <input style="width:50px;" type="text" id="rrrr" value="2000"> <button id="speedbutton">Change Speed</button>
只需在您的按鈕上添加一個單擊偵聽器,即可獲取輸入的新值,然后更改全局延遲變量,如下所示:
$("#speedbutton").on("click", function(e) {
let newDelay = $("#rrrr").val();
if (!isNaN(newDelay)) {
delay = newDelay;
}
})
請參閱下面的工作片段:
$(document).ready(function() { $('.sp').first().addClass('active'); $('.sp').hide(); $('.active').show(); var t = 0; var delay = document.getElementById("rrrr").value; function next() { clearTimeout(t); if (document.visibilityState === 'visible') { $('.active').removeClass('active').addClass('oldActive'); if ($('.oldActive').is(':last-child')) { $('.sp').first().addClass('active'); } else { $('.oldActive').next().addClass('active'); } $('.oldActive').removeClass('oldActive'); $('.sp').fadeOut(); $('.active').fadeIn(); } t = setTimeout(next, delay) } function prev() { clearTimeout(t); if (document.visibilityState === 'visible') { $('.active').removeClass('active').addClass('oldActive'); if ($('.oldActive').is(':first-child')) { $('.sp').last().addClass('active'); } else { $('.oldActive').prev().addClass('active'); } $('.oldActive').removeClass('oldActive'); $('.sp').fadeOut(); $('.active').fadeIn(); } t = setTimeout(next, delay) } $('#button-next').click(next); $('#button-previous').click(prev); t = setTimeout(next, delay) $("#speedbutton").on("click", function(e) { let newDelay = $("#rrrr").val(); if (;isNaN(delay)) { delay = newDelay; } }) });
body { font-size: 12px; font-family: 'Verdana'; } #page-wrapper { margin: 0 auto; position: relative; width: 500px; } #slider-wrapper { width: 300px; height: 200px; } #slider { width: 300px; height: 200px; position: relative; }.sp { width: 300px; height: 200px; position: absolute; font-size: 20px; color: #fff; } #nav { margin-top: 20px; width: 50%; } #button-previous { float: left; cursor: pointer; } #button-next { margin-left: 250px;important: cursor; pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <input style="width:50px;" type="text" id="rrrr" value="2000"> <button id="speedbutton">Change Speed</button><br> <div id="page-wrapper"> <div id="slider-wrapper"> <div id="slider"> <div class="sp" style="background: blue;">1</div> <div class="sp" style="background: gray;">2</div> <div class="sp" style="background: green;">3</div> <div class="sp" style="background: red;">4</div> </div> </div> <div id="nav"></div> <div id="button-previous">prev</div> <div id="button-next">next</div> </div> <br>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.