Невозможно добавить класс к следующему элементу $ (this)

Question

Я хочу добавить класс, рядом с проверенным вводом. Итак, класс будет добавлен к span, который находится рядом с проверенным входным радио.

<label>
 <input type="radio" name="option[228]" value="20" checked="checked">
 <span data-toggle="tooltip" data-placement="top" title="" data-original-title="Purple (+₹20)">
    <img src="http://countrylivings.com/image/cache/catalog/sample/q2-50x50.png" alt="Purple +₹20" width="36px" height="36px">
 </span>
</label>

Я пробовал нет. способов сделать это ... Но не сработало. как ---

$(document).ready(function(){
    if ($('label input').is(':checked')) {
        $(this.element).next().addClass('hloo');
        alert($(this.element).val());
    };
});

Но я получаю предупреждение undefined , когда ввод проверен . Итак,

if ($('label input').is(':checked')) {

работает нормально, чтобы определить, установлен ли флажок, но

$(this) or $(this.element)

не работает. Кто-нибудь знает, что идет не так?

Answer 1

В вашем коде три проблемы. Во-первых, ::checked не является допустимым селектором jQuery, это просто :checked.

Во-вторых, если предположить, что this является ссылкой на объект Element (как в подавляющем большинстве случаев в jQuery), то свойство element отсутствует. Просто используйте $(this).

Наконец, условия if выполняются во внешней области видимости, поэтому this будет ссылаться на document в вашем примере, а не на input. По этой причине val() не определено; вы смотрите на document.value. Чтобы исправить это, выберите элемент непосредственно перед работой с ним:

$(document).ready(function() {
  var $checkedInput = $('label input:checked');
  $checkedInput.next().addClass('hloo');
  console.log($checkedInput.val());
});

.hloo { color: #C00; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
 <input type="radio" name="option[228]" value="20" checked="checked">
 <span data-toggle="tooltip" data-placement="top" title="" data-original-title="Purple (+₹20)">
  <img src="http://countrylivings.com/image/cache/catalog/sample/q2-50x50.png" alt="Purple +₹20" width="36px" height="36px">
 </span>
</label>