javascript - 从所有子元素中删除类并在单击的 Jquery 的父/父级上添加类

Question

背景:我想要完成的事情。当用户单击类为 corp-struct 的 div 内的任何 radio 输入时我想将以下类添加到该元素父元素的两个级别上。所以(在下面的例子中)不是 <label>但是<div class="radio radio-primary radio-button">但在此之前，我想从位于 corp-struct 元素内部的任何 div 中删除同一个类。

除了从其他子 div 中删除类名之外的所有方法都有效。

let $e = $(e.currentTarget);
if ( $e.hasClass('checked-radio-button')){
$e.parent().parent().removeClass('checked-radio-button')
} else {

$("div#corp-struct>div.radio-button").removeClass('checked-radio-button');
$e.parent().parent().addClass('checked-radio-button');

}

问题: 我只想将上述类添加到该元素(如果尚未添加)。同时，我想确保从 <div id="corp-struct" class="radio-group container-fluid"> 中的其他 3 个元素中删除类最后，如果我点击一个已经有类(class)的 radio ，请确保将其从那个 radio 中删除。

**HTML EXAMPLE:**

<div class="radio-group container-fluid corp-struct">
                    <h6>Page Title</h6>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="radio radio-primary radio-button">
                                <label>
                                    <input type="radio" name="corpStructure" id="corpStructure_subset" value="subset" {{#eq corpStructure "subset"}}checked{{/eq}}></input>
                                    <span class="circle"></span>
                                    <span class="check"></span>
                                    <span class="radio-button-text">{{nls "organization_corpStructure_subset"}}-{{corpStructure}}</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="radio radio-primary radio-button">
                                <label>
                                    <input type="radio" name="corpStructure" id="corpStructure_subsidiary" value="subsidiary"></input>
                                    <span class="circle"></span>
                                    <span class="check"></span>
                                    <span class="radio-button-text">{{nls "organization_corpStructure_subsidiary"}}</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="radio radio-primary radio-button">
                                <label>
                                    <input type="radio" name="corpStructure" id="corpStructure_single" value="single"></input>
                                    <span class="circle"></span>
                                    <span class="check"></span>
                                    <span class="radio-button-text">{{nls "organization_corpStructure_single"}}</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="radio radio-primary radio-button">
                                <label>
                                    <input type="radio" name="corpStructure" id="corpStructure_parent" value="parent"></input>
                                    <span class="circle"></span>
                                    <span class="check"></span>
                                    <span class="radio-button-text">{{nls "organization_corpStructure_parent"}}</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

到目前为止我的结果:

当我点击一个 radio 时，类被正确添加，如果我再次点击它，它被正确删除。但是，如果我单击一个，然后单击第二个，而不是第 1 个，则将类(class)删除，他们现在都拥有该类(class)。

Answer 1

如果我正确理解你的问题，你应该能够做这样的事情:

var $e = $(e.currentTarget),
    $div = $e.closest('div.radio-button'),
    $container = $e.closest('.corp-struct');

    $div.toggleClass('checked-radio-button');

    $('div.radio-button.checked-radio-button', $container).not($div).removeClass('checked-radio-button');

所以把它分解....

获取被点击的单选按钮的 jQuery 对象引用:

var $e = $(e.currentTarget)

然后引用包含 div 的单选按钮(closest 将向上导航 DOM 树，直到找到具有提供的选择器的第一个元素。我将其更改为这个以防您的 DOM 结构发生变化.parent().parent() 可能失败的 future :

$div = $e.closest('div.radio-button')

然后是整个.corp-struct 容器的引用:

$container = $e.closest('.corp-struct');

现在切换容器 div 的类:

$div.toggleClass('checked-radio-button');

最后从 $container 中不是这个 div 的任何其他 div 中删除该类

$('div.radio-button.checked-radio-button', $container).not($div).removeClass('checked-radio-button');

有道理吗？

查看此 fiddle演示