jQuery Slider在移動設備上不起作用

Question

我目前正在嘗試弄清為什么我的滑塊在移動設備上不起作用。 我不確定這是不兼容還是事件偵聽器問題。

滑塊在瀏覽器中似乎可以正常工作，並且當滑塊范圍增大和減小時，表情符號也會更改。 這就是我想要在移動設備上實現的目標。

這是我正在使用的：

 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" /> 

幫助將不勝感激。

Answer 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" />