Доступ к тексту ярлыков через jquery

Question

Есть ли способ получить текст из элемента <label> с помощью jquery? Потому что мы можем получить значение от него, используя $(this).val();, но не можем сделать то же самое для текста ярлыка.

Похоже, мы должны иметь возможность запросить текст <label>, используя $(this), когда выбран переключатель, так как $(this) знает его значение за это время.

Первоначально выходили с заявлениями о случаях и вручную заполняли какой-либо текст, но если мы можем просто вставить текст метки вместо этого, это отрицает необходимость использования всех операторов 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 Свойство, который возвращает NodeList из <label> элементов, связанных с этим конкретным <input>, используя массив индексов обозначения, чтобы получить (обычно) первый:

this.labels[0].textContent; 

Ссылки:

• HTMLInputElement.