javascript - Jquery Slider 在移动设备上不起作用
问题描述
我目前正在尝试找出为什么我的滑块无法在移动设备上运行。我不确定这是不兼容还是事件侦听器问题。
滑块在浏览器中似乎可以正常工作,并且当滑块范围上下移动时,表情符号会发生变化。这就是我希望在移动设备上实现的目标。
这是我正在使用的内容:
var slider = document.getElementById("myRange1");
slider.addEventListener('mouseup', function(event) {
var x = event.target.value
console.log(x)
if (x <= 5) {
slider.className = '';
slider.className = `MyClass-${x}`;
slider.className = `MyClass-${x}`;
slider.className = `MyClass-${x}`;
slider.className = `MyClass-${x}`;
slider.className = `MyClass-${x}`;
}
})
var slider2 = document.getElementById("myRange2");
slider2.addEventListener('mouseup', function(event) {
var x = event.target.value
console.log(x)
if (x <= 5) {
slider2.className = '';
slider2.className = `MyClass-${x}`;
slider2.className = `MyClass-${x}`;
slider2.className = `MyClass-${x}`;
slider2.className = `MyClass-${x}`;
slider2.className = `MyClass-${x}`;
}
})
var slider3 = document.getElementById("myRange3");
slider3.addEventListener('mouseup', function(event) {
var x = event.target.value
console.log(x)
if (x <= 5) {
slider3.className = '';
slider3.className = `MyClass-${x}`;
slider3.className = `MyClass-${x}`;
slider3.className = `MyClass-${x}`;
slider3.className = `MyClass-${x}`;
slider3.className = `MyClass-${x}`;
}
})
input[type=range] {
-webkit-appearance: none;
height: 20px;
width: 200px;
max-width: 100%;
margin: 25px auto;
background: #08121c;
border: 3px solid #08121c;
border-radius: 100px;
display: block;
}
input[type=range]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 35px;
width: 35px;
border-radius: 100%;
background-color: transparent;
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/02-beaming-face-with-smiling-eyes.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: 100%;
}
input[type="range"].MyClass-1::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/10-smiling-face-with-smiling-eyes.svg);
}
input[type="range"].MyClass-2::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/37-relieved-face-2.svg);
}
input[type="range"].MyClass-3::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/02-beaming-face-with-smiling-eyes.svg);
}
input[type="range"].MyClass-4::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/19-star-struck-1.svg);
}
input[type="range"].MyClass-5::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/13-smiling-face-with-heart-eyes.svg);
}
<input name="entry.878505724" type="range" id="myRange1" min="1" max="5" value="3" step="1" />
<input name="entry.165236575" type="range" id="myRange2" min="1" max="5" value="3" />
<input name="entry.425406382" type="range" id="myRange3" min="1" max="5" value="3" step="1" />
帮助将不胜感激。
解决方案
在移动设备中检查此代码..
function addListenerMulti(element, eventNames, listener) {
var events = eventNames.split(' ');
for (var i=0, iLen=events.length; i<iLen; i++) {
element.addEventListener(events[i], listener, false);
}
}
var slider = document.getElementById("myRange1");
addListenerMulti(slider, 'mouseup touchend', function(event){
var x = event.target.value
console.log(x)
if (x <= 5) {
slider.className = '';
slider.className = `MyClass-${x}`;
slider.className = `MyClass-${x}`;
slider.className = `MyClass-${x}`;
slider.className = `MyClass-${x}`;
slider.className = `MyClass-${x}`;
}
});
var slider2 = document.getElementById("myRange2");
addListenerMulti(slider2, 'mouseup touchend', function(event){
var x = event.target.value
console.log(x)
if (x <= 5) {
slider2.className = '';
slider2.className = `MyClass-${x}`;
slider2.className = `MyClass-${x}`;
slider2.className = `MyClass-${x}`;
slider2.className = `MyClass-${x}`;
slider2.className = `MyClass-${x}`;
}
});
var slider3 = document.getElementById("myRange3");
addListenerMulti(slider3, 'mouseup touchend', function(event){
var x = event.target.value
console.log(x)
if (x <= 5) {
slider3.className = '';
slider3.className = `MyClass-${x}`;
slider3.className = `MyClass-${x}`;
slider3.className = `MyClass-${x}`;
slider3.className = `MyClass-${x}`;
slider3.className = `MyClass-${x}`;
}
});
input[type=range] {
-webkit-appearance: none;
height: 20px;
width: 200px;
max-width: 100%;
margin: 25px auto;
background: #08121c;
border: 3px solid #08121c;
border-radius: 100px;
display: block;
}
input[type=range]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 35px;
width: 35px;
border-radius: 100%;
background-color: transparent;
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/02-beaming-face-with-smiling-eyes.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: 100%;
}
input[type="range"].MyClass-1::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/10-smiling-face-with-smiling-eyes.svg);
}
input[type="range"].MyClass-2::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/37-relieved-face-2.svg);
}
input[type="range"].MyClass-3::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/02-beaming-face-with-smiling-eyes.svg);
}
input[type="range"].MyClass-4::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/19-star-struck-1.svg);
}
input[type="range"].MyClass-5::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/13-smiling-face-with-heart-eyes.svg);
}
<input name="entry.878505724" type="range" id="myRange1" min="1" max="5" value="3" step="1" />
<input name="entry.165236575" type="range" id="myRange2" min="1" max="5" value="3" />
<input name="entry.425406382" type="range" id="myRange3" min="1" max="5" value="3" step="1" />
推荐阅读
- mysql - 错误 pool.db:错误:ER_CON_COUNT_ERROR:使用 MySql 的连接太多
- javascript - can't get random # 通过 switch 语句
- java - 如何跨返回整数的不同类访问共享bean实例
- java - 使用 Java 进行自适应卡片渲染和创作
- java - 错误:运行 Spring Boot 应用程序时,由于缺少 EmbeddedServletContainerFactory bean,无法启动 EmbeddedWebApplicationContext
- python - 如何在 tkinter 中修复 scrolledtext 小部件的滚动条的位置?
- video - 即使在转码后,FFMPEG音频/视频在剪切和连接后也不同步
- java - 将功能移动到另一个活动后,无法从 Firestore 中检索文档
- excel - 带有 NamedRange 的 VLookup 函数被引用为字符串
- java - 如何在 Android 上使用 HttpsURLConnection 将 JSON 数据发送到 API?