Question

我正在尝试编写一个javascript / jquery函数，该函数查看具有特定ID的div，并从具有特定类的任何子div中删除特定类。

E.g。该函数应从removeme：

中的任何div中删除类div id="foo"

<div id="foo" onClick="openGame('foo')">
    <div class="bar removeme"></div>
</div>

我尝试写这个函数：

function openGame(divid) {
    var container = document.getElementById(divid);
    var responses = container.getElementsByClassName("bar");
    while (responses[0]) {
        responses[0].removeClass('removeme');
    };
}

请注意我是JS的超级初学者，并不熟悉while循环：/

Answer 1

如果你想用jQuery来实现这个目标。

$(document).ready(function() {
    $('div#foo').click(function() {
        $(this).find('.removeme').removeClass('removeme');
    });
});

这会在您的元素上创建一个click事件，其id为＃34; foo＆＃34;将找到它内部的每个元素并删除类＆＃34; removeme＆＃34;从它。

Answer 2

请参阅removeClass()方法（sample fiddle）：

$("#foo div.removeme").removeClass("removeme")

选择器#foo div.removeme定位ID为<div>的元素中具有类removeme的任何#foo。

如果，正如您的代码示例所示，您希望定位<div> 两个类bar和removeme，您可以使用这样：

$("#foo div.bar.removeme").removeClass("removeme")

<小时/> 也就是说，让我们来看看您的代码示例：

function openGame(divid) { // get the container by id var container = document.getElementById(divid); // get a collection of elements having class bar var responses = container.getElementsByClassName("bar"); // while there's anything left in responses while (responses[0]) { // call removeClass() on the first item responses[0].removeClass('removeme'); }; }

你的循环有两个问题：

Node.removeClass()不是本机DOM方法;试图调用它会导致错误。您可以使用jQuery的removeClass()方法，或者作为本机替代方法，您可以使用以下方法：

responses[0].classList.remove("removeme")

即使responses[0]位于来自getElementsByClassName("bar")的列表中，但一旦该列表不再具有类bar，该元素就不会从该列表中删除。因此，由于您实际上从未从该列表中删除项目，因此您的循环将无限延续。

在普通的javascript中，你的代码可以这样重写：

＆＃13;
＆＃13;
document.getElementById("foo").addEventListener("click", function(e) { [...this.querySelectorAll("div.bar.removeme")].forEach(el => el.classList.remove("removeme") ) });
＆＃13;
.removeme { color: red; }
＆＃13;
<div id="foo"> <div class="bar removeme">div 1</div> <div class="bar removeme">div 2</div> <div class="bar removeme">div 3</div> </div>
＆＃13;
＆＃13;
＆＃13;

_{请参阅Element.classList和Array.prototype.forEach()}

Answer 3

我会使用JQuery来完成这项工作：

$("#foo").find("div").removeClass("removeme");

这将找到#foo的所有孩子并删除班级.removeme。

在div中按类名切换（）元素

3 个答案: