我正在尝试将“播放”按钮添加到我拥有的jQuery时间滑块上。
HTML中的时间滑块元素:
<input id="timeslide" type="range" min="0" max="25" value="0" step="1" /><br>
var inputValue = null;
var years = ["1993","1994","1995","1996","1997","1998","1999","2000","2001","2002","2003","2004","2005","2006","2007","2008","2009", "2010","2011","2012","2013","2014","2015","2016","2017","2018","2019"];
我构建了一个年份数组,该数组将用于根据当前滑块值对时间滑块进行索引。显示的数据将根据年份而变化。
d3.select("#timeslide").on("input", function() {
console.log(value)
update(+this.value);
});
function update(value) {
console.log(value)
document.getElementById("range").innerHTML=years[value];
inputValue = years[value];
console.log(inputValue)
d3.selectAll(".tenants")
.attr("opacity", dateMatch);
}
我尝试添加“播放”按钮,以便滑块将自动从头到尾遍历其值的范围:
<div class="container">
<button id="play">
Start
</button>
$('#play').click(function(){
$("#timeslide").trigger('input');
},25);
我在这里正确吗?我只需要一个带有事件监听器的按钮,它将触发时间滑块滚动其25个值中的每一个。