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

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>