Question

背景：我想要完成的任务。当用户使用类corp-struct单击div中的任何无线电输入时，我想将以下类添加到该元素父元素两个级别。所以（在下面的例子中）不是<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个元素中删除该类，如果我点击已经有类的广播，请确保将其从该类中删除。

**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>

我的结果到目前为止：

当我点击一个收音机时，该类被正确添加，如果我再次点击它，它将被正确删除。但是，如果我点击一个，然后点击第二个而不是数字1删除了类，他们现在都有这个类。

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()可能会失败）：

$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了解演示

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

1 个答案: