Переключить класс дочернего элемента братьев и сестер при выборе ввода с помощью jquery - PullRequest
Новая
       22

Переключить класс дочернего элемента братьев и сестер при выборе ввода с помощью jquery

0 голосов
/ 15 декабря 2010

Учитывая следующую структуру HTML: 

<input class="addon-thumb" type="checkbox" name="foo"/><label for="foo"><img class="addon-thumb" src="" title="bar" alt="foo"/></label>

И как с помощью JQuery переключить класс img внутри тега метки, чтобы он был «выбран», когда флажок установлен?

Неважно, сохраняет ли он другой класс (addon-thumb) или нет, если флажок снят, он вернет этот класс.

РЕДАКТИРОВАТЬ: Я попробовал оба приведенных ниже предложения внутри $(document).ready(function(){});, и по какой-то причине это не работает для меня.Вообще-то, я делал что-то очень похожее на нижеследующее.Буду признателен за любую помощь.

Ответы [ 2 ]

1 голос
/ 15 декабря 2010

Вы можете просто сделать это: 

$(":checkbox").change(function () {
   $(this).next("label").children("img").toggleClass("selected", this.checked);
});

Если положение метки может измениться, то вы можете найти правильную связанную метку на основе name: 

$("[for=" + this.name + "]").children("img")
   .toggleClass("selected", this.checked);
1 голос
/ 15 декабря 2010 
$("input[type='checkbox']").change(function() {
    if(this.checked) {
        $(this).next('label').children('img').addClass('selected');
    }
    else {
        $(this).next('label').children('img').removeClass('selected');
    }
});

next(selector) получает следующего брата , если соответствует селектору.Очевидно, что приведенный выше код работает, только если структура вашего HTML всегда такова.

Ссылка: change, next, children, addClass, removeClass

...