javascript - 单击 <li> 而不是 <option> 元素时如何播放音频 - Javascript

Question

所以基本上目标是有一个轨道列表，当每个轨道被点击时，音频开始播放。起初我使用“选择”和“选项”标签来执行此操作，但我希望它是一个可滚动列表而不是 iPhone 移动浏览器上的下拉列表。所以我决定尝试使用 ul 和 li 标签来做到这一点。有没有办法让我的列表项可点击，以便点击事件触发并调用 javascript 函数“changeTrack”？感觉我已经尝试了一切来让它工作，但我仍然一无所知。

在这里查看 一个 https://jsfiddle.net/z0usk6rp/9/

下图是我试图通过不为我的轨道列表使用“选择”和“选项”标签来避免的

Answer 1

尝试使用 select 和属性 onchange。

没有在您的特定设备上进行测试。

<select id="myoptionst" onchange="console.log(this.value)">
				<option selected  value="Carti_Shawty_In_Love"><a href="#">Shawty In Love</a></option>
				<option value="Soptionm_Jimmi_Brink_Truck">Brink Truck</option>
				<option value="Carti_Shawty_In_Love">Shawty In Love</option>
				<option value="Soptionm_Jimmi_Brink_Truck">Brink Truck</option>
				<option value="Carti_Shawty_In_Love">Shawty In Love</option>
				<option value="Soptionm_Jimmi_Brink_Truck">Brink Truck</option>
				<option value="Carti_Shawty_In_Love">Shawty In Love</option>
				<option value="Soptionm_Jimmi_Brink_Truck">Brink Truck</option>
			</select>

或者:

myoptionst.onchange = (function(){
 
   console.log(myoptionst.value)
   
 })

<select id="myoptionst">
				<option selected  value="Carti_Shawty_In_Love"><a href="#">Shawty In Love</a></option>
				<option value="Soptionm_Jimmi_Brink_Truck">Brink Truck</option>
				<option value="Carti_Shawty_In_Love">Shawty In Love</option>
				<option value="Soptionm_Jimmi_Brink_Truck">Brink Truck</option>
				<option value="Carti_Shawty_In_Love">Shawty In Love</option>
				<option value="Soptionm_Jimmi_Brink_Truck">Brink Truck</option>
				<option value="Carti_Shawty_In_Love">Shawty In Love</option>
				<option value="Soptionm_Jimmi_Brink_Truck">Brink Truck</option>
			</select>

根据您的确切查询，问题应该是 li 元素不能包含 value 属性。这是为输入保留的。 要获得类似的行为，您可以使用 data-*属性，然后您可以使用 dataset 检索它。

document.querySelectorAll("li").forEach(function(e){

  e.setAttribute("onclick", "console.log(this.dataset.value)")

})

			<ul id="mylist">
				<li data-value="Carti_Shawty_In_Love"><a href="#">Shawty In Love</a></li>
				<li data-value="Slim_Jimmi_Brink_Truck">Brink Truck</li>
				<li data-value="Carti_Shawty_In_Love">Shawty In Love</li>
				<li data-value="Slim_Jimmi_Brink_Truck">Brink Truck</li>
				<li data-value="Carti_Shawty_In_Love">Shawty In Love</li>
				<li data-value="Slim_Jimmi_Brink_Truck">Brink Truck</li>
				<li data-value="Carti_Shawty_In_Love">Shawty In Love</li>
				<li data-value="Slim_Jimmi_Brink_Truck">Brink Truck</li>
			</ul>

这里脚本将为每个 li 元素设置一个属性 onclick。

onclick 将检索 data-value 值。

注意:这是一个现代的 ecma6 片段，注意与旧浏览器的兼容性。