Question

以下示例使用某些名称ID = btnHour1 ， btnHour2 等等，这使我成为冗长的代码。我一直在寻找这样的教程，但没找到。

HTML：

<div id="lblHour"></div>
<div>
<button id="btnHour1" value="03:00 PM">Available 1</button>
<button id="btnHour2" value="03:30 PM">Available 2</button>
<button id="btnHour3" value="04:00 PM">Available 3</button>
<button id="btnHour4" value="04:30 PM">Available 4</button>
<button id="btnHour5" value="05:00 PM">Available 5</button>

JavaScript的：

$(document).ready(function(){  
$("#btnHour1").click(function(){    
    var getValue = $("#btnHour1").val();
    document.getElementById("lblHour").innerHTML = getValue;
});
$("#btnHour2").click(function(){
    var getValue = $("#btnHour2").val();
    document.getElementById("lblHour").innerHTML = getValue;
});
$("#btnHour3").click(function(){
    var getValue = $("#btnHour3").val();
    document.getElementById("lblHour").innerHTML = getValue;
});
$("#btnHour4").click(function(){
    var getValue = $("#btnHour4").val();
    document.getElementById("lblHour").innerHTML = getValue;
});
$("#btnHour5").click(function(){
    var getValue = $("#btnHour5").val();
    document.getElementById("lblHour").innerHTML = getValue;
});

}）;

我需要建议通过使用只有一个名称 id = “btnHour”<来使我的 JavaScript 代码变得更简单和简短/ strong>即可。

执行代码： https://jsfiddle.net/L5m8xop4/

Answer 1

您可以使用Starts with选择器（^ =）：

$("button[id^='btnHour'").on("click", function() {
    var getValue = $(this).val();
    document.getElementById("lblHour").innerHTML = getValue;
});

完整示例：

$("button[id^='btnHour'").on("click", function() {
    var getValue = $(this).val();
    document.getElementById("lblHour").innerHTML = getValue;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="lblHour"></div>
<div>
<button id="btnHour1" value="03:00 PM">Available 1</button>
<button id="btnHour2" value="03:30 PM">Available 2</button>
<button id="btnHour3" value="04:00 PM">Available 3</button>
<button id="btnHour4" value="04:30 PM">Available 4</button>
<button id="btnHour5" value="05:00 PM">Available 5</button>

需要更简单的JS代码，只有一个ID属性

1 个答案: