Question

有没有办法使用jquery从<label>元素获取文本？因为我们能够使用$(this).val();从中获取值，但无法对标签文本执行相同操作。

似乎我们应该能够在选择单选按钮时使用<label>查询$(this)文本，因为$(this)在此期间知道其值。

最初使用case语句并手动填写一些文本，但如果我们只能插入标签文本，那么这将取消所有使用的case语句的需要。

想法/建议？

HTML

<div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#accordion-second">What You Are Interested In Learning About</a>
                        </h4>
                    </div>
                    <div id="accordion-second" class="panel-collapse collapse">
                        <div class="panel-body">
                            <div class="radio">
                                <label><input type="radio" name="optradio2" value="2a">the Automotive Industry</label>
                            </div>
                            <div class="radio">
                                <label><input type="radio" name="optradio2" value="2b">the sports industry</label>
                            </div>
                            <div class="radio">
                                <label><input type="radio" name="optradio2" value="2c">the music industry</label>
                            </div>
                        </div>
                    </div>
                </div>

jquery的

<script>
    $('[name="optradio2"]').on('change', function () {
        $('#accordion-third').slideToggle();
        $('#accordion-second').slideToggle();

        //how do you get the label text 
        var labelText = $("label", this).text();

        //current method but would prefer to just insert the label text
        /*var value = $(this).val();
        switch (value) {
            case "2a":
                $('#blank2', $('#myModal')).text('the automotive industry');
                break;
            case "2b":
                $('#blank2', $('#myModal')).text('the sports industry');
                break;
            case "2c":
                $('#blank2', $('#myModal')).text('the music industry');
                break;
            default:
                alert("oops! something went wrong");
        }*/
})
</script>

Answer 1

上下文选择器使用find并搜索后代。

标签不是输入的子项，反之亦然，因此您必须寻找父母，closest似乎适合

var labelText = $(this).closest("label").text();

Answer 2

您可以使用<label>属性访问相关的HTMLInputElement.labels，该属性返回与该特定<label>关联的<input>元素的NodeList，使用数组索引表示法得到（通常）第一个：

this.labels[0].textContent;

参考文献：

HTMLInputElement。

通过jquery访问标签文本

2 个答案: