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

【问题标题】：Need more simple JS code with only one ID attribute需要更简单的只有一个 ID 属性的 JS 代码
【发布时间】：2016-08-14 14:43:41
【问题描述】：

下面的示例使用一些名称 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/

【问题讨论】：

这段代码我不需要类，毕竟这个问题已经被Darren Davies解决了..@a-wolff，感谢cmets。
您不需要，但这对于代码维护会更好。但是，使用startsWith 属性选择器很简单。问题可能是，你真的需要为每个button 设置一个ID吗？！...
我会制作很多按钮，所以我认为使用 ID 属性来定义每个按钮会更好。如果有任何其他建议，请告诉我。 @a-wolff，你能举个例子吗，如果我把这段代码与我的mysql数据库相关，也许我可以使用。
使用类的示例：jsfiddle.net/L5m8xop4/1 现在这真的取决于您的用例。
我试过了，看来你是对的，这段代码更简单简短，所以我更容易将这段代码与其他代码联系起来。 “感谢您的建议”.

标签： javascript jquery html css ajax

【解决方案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>

【讨论】：