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

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 代码更简单和简短/强>。

执行代码: 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>