Изменение атрибутов класса при включенном переключателе

#jquery

Вопрос:

У меня есть этот фрагмент кода

 <td width="143"><b>Monday</b></td>
<td width="68" class="open select_open">
  <span class="jqTransformRadioWrapper">
    <a href="#" class="jqTransformRadio" rel="radio_m"></a>
    <input type="radio" name="radio_m" checked="checked" class="jqTransformHidden">
  </span>
</td>

Переключатель не имеет значения. Тем не менее, я должен иметь возможность изменять значение атрибута класса <a> тега и <td> тега над переключателем, когда он установлен.

Не мог бы кто-нибудь помочь мне с этим, пожалуйста?

1. Из вашего вопроса неясно, что именно вы хотите сделать.

2. Какие теги / значения / атрибуты вы хотите изменить? Кроме того, что вы уже пробовали?

3. Примечание: Существует только один переключатель с name="radio_m" , поэтому вы не сможете снять его после того, как он установлен (без JavaScript).

Ответ №1:

Вы можете пройтись по структуре своих элементов. prev() функция возвращает предыдущий элемент перед radiobutton, closest('td') возвращает ближайший элемент TD, который является вашим TD.

 $('input[name=radio_m]').change(function() {
   var $this = $(this);
   $this.prev().addClass('...'); // adding class to link above
   $this.prev().removeClass('...'); // removing class to link above

   $this.closest('td').addClass('...'); // adding class to table cell
   $this.closest('td').removeClass('...'); // removing class to table cell
});

1. Пожалуйста , кешируйте $(this) , $(this).prev() и $(this).parent() .

2. $(this).parent() было бы span . Вы должны использовать $(this).parent('td')

3. Кэшированная внутренняя переменная. Спасибо за совет.

4. Я не знаю, что именно не работает. Но toggleClass здесь тоже есть опция.

Ответ №2:

 $("input[name='radio_m']").change(function(){
    if ($("input[name='radio_m']:checked").val() == '1') {
        $(".jqTransformRadio").attr('href', '[Your Value]');
        $(".select_open").attr('width','[Your Width');
    }
}

Это должно сработать.

1. Переключатель не имеет значения, поэтому .val() ничего не возвращает (на самом деле я думаю, что он может возвращать «включено» или «выключено», но я не знаю, все ли браузеры (или только Chrome) делают это). Кроме того, вам не нужно input[name='radio_m'] снова выбирать внутри события, это будет this так как это элемент, на котором вы запустили событие. Кроме того, if ($("input[name='radio_m']:checked").val() == '1') { должно быть if ($(this).is(':checked')) { или еще лучше if(this.checked) { .

2. Да, модификации Rocket более оптимизированы

Ответ №3:

 $('input[name="radio_m"]').change(function(){
    var $this = $(this), $td = $this.closest('td');
    if(this.checked){
      $td.find('a.jqTransformRadio').addClass('addClass')
      $td.removeClass('removeClass');
    }
    else{
      $td.find('a.jqTransformRadio').removeClass('addClass')
      $td.addClass('removeClass');
    }
});

Вы можете попробовать что-то вроде этого. $this.closest('td'); даст вам <td> то, что вы хотите, и оттуда вы сможете найти <a> тег. Используйте addClass и removeClass (или даже toggleClass ) для изменения классов элементов.