javascript - Bootstrap 3按钮组，试图获取点击了哪个按钮的值

Question

在这里学习Javascript，只是卡住了一小会儿。 我有一个 html 按钮组，其构造如下。

<div class="button-holder type_of_txt_btn_group" data-toggle="buttons">
                            <label class="btn btn-primary active" value="TE">
                                <input name="text" type="radio" id="txtbutton_id">Text
                            </label>
                            <label class="btn btn-primary" name="textbook" value="TK">
                                <input name="textbook" type="radio">Textbook
                            </label>
                            <label class="btn btn-primary" name="list" value="LI">
                               <input name="list" type="radio" value="list">List
                            </label>
                        </div>

value每个 <label> 的属性对于过滤目的很重要。因此，我想创建一个函数，当您单击其中一个按钮时，该函数能够返回(或至少使用)一个人单击的标签的值。为了进行检查，我想简单地使用 console.log 表达式。理想情况下，我会在控制台中看到“TE”或“TK”或“LI”。

 $(".type_of_txt_btn_group label").on("click",function() {          
       var filteringType = ""
       filteringType = $(this).val()
       console.log(filteringType);
 });

但到目前为止，这在我的控制台中产生了似乎是空字符串的内容，目前我不太确定为什么。这是我在 fiddle 上创建的版本。 https://jsfiddle.net/12rsob36/1/

这是否返回一个空字符串，如果是，为什么？它实际上返回了标签元素的值，就像我想要的那样，还是出了什么问题？我可以做什么来修复它？

Answer 1

您无法访问 label 的值与 val() 因为它只支持表单元素。您可以使用 data() 改为函数并设置 data-x按钮的属性。

此外official documentation建议使用<button>而不是<label> :

 $(".type_of_txt_btn_group button").on("click",function() {
       var filteringType = $(this).data('value')
       console.log(filteringType);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="button-holder type_of_txt_btn_group btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default" data-value="TE">Text</button>
  <button type="button" class="btn btn-default" data-value="TK">Textbook</button>
  <button type="button" class="btn btn-default" data-value="LI">List</button>
</div>