Почему в этом случае не работает селектор closest ()?

Question

Я пытаюсь активировать toggleClass () для определенного изображения при нажатии на кнопку-переключатель.Я годами пытался заставить его работать, но не могу.Я могу выбрать родительский элемент переключателя, но ничего не происходит.Я пробовал next (), nextAll () и closest ().Все, что кажется, не делает то, что я пытаюсь достичь.

Вот моя функция jQuery:

$(document).ready(function() {
  $("input[type=radio]").change(function () {
    if (this.value == "AM") {
      $(this).closest('img[title="am"]').toggleClass('houdini');
    } else if (this.value == "PM") {
    alert('PM');
/*      Something here */
    } else {
        return false();
    }
  });
});

и мой HTML:

<tr>
    <td><input type="radio" name="bisley" value="AM" />AM<input type="radio" name="bisley" value="PM" />PM<span class="compname">Bisley</span></td>
    <td>Fit more into less space</td>
    <td class="time"><img src="/images/generic/openday/tick.png" alt="tick" title="am" class="houdini" />10.00AM</td>
    <td class="time"><img src="/images/generic/openday/tick.png" alt="tick" title="pm" class="houdini" />1.30PM</td>
</tr>

Answer 1

closest ищет элементы предка; next и nextAll поиск родственных элементов. Элемент img, который вы хотите, является дочерним элементом элемента-брата, поэтому вам понадобится более сложное утверждение. Пойдите с этим:

$(this).closest('tr').find('img[title="am"]').toggleClass('houdini');

Здесь написано "найдите ближайший элемент tr предка, а затем найдите img[title="am"] внутри него.

Answer 2

изменить на

$(this).parent().children('img[title="am"]').toggleClass('houdini');

СМ. ДЕМО