Братья и сестры jQuery, toggleClass влияет на другие div

У меня есть HTML-форма, которая начинается так:

<div class="row form-group">
    <label for="real_name" class="col-sm-3 control-label">Name</label>
    <div class="col-sm-5">
        <input type="text" class="form-control require_name" name="real_name" id="real_name" maxlength="100">
    </div>
    <div class="col-sm-4 btn-group">
        <div class="btn btn-default btn-private btn-warning">
            <label for="private_check">Private</label>
            <input type="radio" id="private_check" class="privacy_check" name="privacy[real_name_privacy]" value=0 checked="checked" />
        </div>
        <div class="btn btn-default btn-public">
            <label for="public_check">Public</label>
            <input type="radio" id="public_check" class="privacy_check" name="privacy[real_name_privacy]" value=1 />
        </div>
    </div>
</div>

    <div class="row form-group">
        <label for="display_name" class="col-sm-3 control-label">Artist Name</label>
        <div class="col-sm-5">
            <input type="text" class="form-control require_name" name="display_name" id="display_name" value="This guy" maxlength="100">
        </div>
        <div class="col-sm-4 btn-group">
            <div class="btn btn-default btn-private">
                <label for="private_check">Private</label>
                <input type="radio" id="private_check" class="privacy_check" name="privacy[display_name_privacy]" value=0 />
            </div>
            <div class="btn btn-default btn-public btn-warning">
                <label for="public_check">Public</label>
                <input type="radio" id="public_check" class="privacy_check" name="privacy[display_name_privacy]" value=1 checked="checked" />
            </div>
        </div>
    </div>

И так далее, их около десятка. Для этих .btn div в «btn-group» у меня есть этот jQuery:

$(".btn").click(function() {
    $(this).find("input").attr('checked', true);
    $(this).siblings().find("input").attr('checked', false);
    $(this).toggleClass('btn-warning btn-default');
    $(this).siblings().toggleClass('btn-default btn-warning');
});

Который должен переключать базовый ввод для каждого .btn при нажатии на .btn и переключать его класс с .btn-warning на .btn-default, в зависимости от того, был ли он проверен или нет. Вышеупомянутое, очевидно, не работает: щелчок .btn на первом переключает атрибут его родного брата в .btn, но каждый последующий .btn будет переключать каждый над ним в DOM, а toggleClass ничего не делает. в группе .btn, на которую я нажал, но нажатие кнопки в группе btn ниже также изменяет кнопку выше. Я пытался сделать это трудным путем, с помощью вложенных элементов div, проверяющих, удалены или добавлены ли необходимые классы для каждой кнопки в зависимости от состояния ее основного переключателя, но получил тот же результат. Я думаю, что проблема связана с siblings(), но у кого-нибудь есть идеи, как заставить это работать, не просматривая всю DOM в поисках каждого .btn?


jquery siblings toggleclass
person Jeff    schedule 18.11.2013    source источник
comment
Я не понимаю, какая цель. Какую функциональность вы ищете?   -  person j08691    schedule 18.11.2013
comment
Проблема, возможно, вы используете toggleClass, кстати, измените attr на prop   -  person 5z- -    schedule 18.11.2013
comment
Пользователь нажимает кнопку .btn, которая проверяет базовый радиовход и добавляет предупреждение .btn к этому .btn. .btn-default для снятия флажка, .btn-warning для флажка.   -  person Jeff    schedule 18.11.2013
comment
@ 5-T: использование реквизита не меняет атрибут, когда я использую его там.   -  person Jeff    schedule 18.11.2013
comment
Зачем нацеливаться на btn div вместо элемента дочерней метки?   -  person j08691    schedule 18.11.2013
comment
Зачем мне настраивать таргетинг на ярлык? .btn — это то, что я хочу изменить и что нажимает пользователь.   -  person Jeff    schedule 18.11.2013

Ответы (2)


arrow_upward
2
arrow_downward

Пытаться

jQuery(function ($) {
    $(".btn").click(function (e) {
        if (!$(this).find("input").is(':checked') || !$(this).is('.btn-warning')) {
            $(this).find("input").prop('checked', true);
            $(this).siblings().addBack().toggleClass('btn-default btn-warning');
        }
    });
});

Демонстрация: Fiddle

Обновление:

Вторая проблема связана с дублированием идентификаторов переключателей, у вас есть несколько элементов с идентификаторами private_check и publi_check, а соответствующий label имеет установленный атрибут for, который является причиной проблемы, измените идентификаторы на private_check<n> и public_check<n>, чтобы быть только одним элементом с определенным идентификатором.

<label for="private_check1">Private</label>
<input type="radio" id="private_check1" class="privacy_check" name="privacy[real_name_privacy]" value=0 checked="checked" />
person Arun P Johny    schedule 18.11.2013
comment
У этого все еще есть та же проблема, что и у меня: изменение состояний кнопок во второй группе кнопок также меняет верхнюю, а это не то, что я хочу. Кроме того, он всегда меняет первый набор кнопок; если я выберу третий набор кнопок на этой странице, он изменит этот набор и самый первый набор, но не второй. - person Jeff; 18.11.2013
comment
Я думаю, что вы на деньги с этим (re: обновление). Я отредактировал первые несколько и могу, по крайней мере, заставить работать переключатель ввода, не затрагивая другие элементы div. Но это, кажется, проблема. Спасибо! - person Jeff; 18.11.2013

arrow_upward
1
arrow_downward

Это ты хочешь?

$(".btn").click(function() {
   $(this).find("input").prop('checked', true);
   $(this).siblings().find("input").prop('checked', false);
   $(this).addClass('btn-warning btn-default');
   $(this).siblings().removeClass('btn-default btn-warning');
});
person 5z- -    schedule 18.11.2013
comment
Неа. Все еще меняет первый набор кнопок, когда я нажимаю на второй, третий и т. д. - person Jeff; 18.11.2013
comment
Спасибо, но продолжаю делать то же самое, поэтому я думаю, что проблема в братьях и сестрах. - person Jeff; 18.11.2013