jQuery无法识别类的变化，尽管浏览器确实如此

jQuery doesn't recognise that the class changed, although the Browser does

本文关键字：浏览器 识别 变化 jQuery      更新时间：2023-09-26

我一直在尝试使用jQuery创建一个下拉菜单。我有 3 个子文件夹，每个子文件夹有 3 个子文件夹（如果这是错误的术语，请纠正我）。根据子文件夹是折叠（子子可见）还是展开（子可见）的不同，展开时有一个向下指向右的小箭头。我是新手，不想使用很多外部脚本，所以我删除了Subshown_arrow类并在单击时（或其他方式）添加Subhidden_arrow类。

<a href="#"> <img id="arrow" class="Subshown_arrow" /> Sub-forum 1 </a>
            <li class="sub-sub"> <a href="#"> Sub-sub-forum 1 <li>
            <li class="sub-sub"> <a href="#"> Sub-sub-forum 2 <li>
            <li class="sub-sub"> <a href="#"> Sub-sub-forum 3 <li>

我在这里删除了 scr ^，通常它就在那里。

var main = function() {

$(".Subshown_arrow").click(function() {
    alert("Subshown_arrow clicked!");
    $(this).removeClass("Subshown_arrow").addClass("Subhidden_arrow");
});
$(".Subhidden_arrow").click(function() {
    alert("Subhidden_arrow clicked!");
    $(this).removeClass("Subhidden_arrow").addClass("Subshown_arrow");
});
};
$(document).ready(main);

但是，当我第一次单击箭头时，它会按预期旋转。但是当我再次单击它时，jQuery的反应就像第一次单击一样。警报每次都会打印出"Subshown_arrow点击！"。

但是当我在浏览器中尝试并使用Chrome的内置工具来查看代码时，类发生了变化。这意味着更改类有效，但我的jQuery脚本忽略了它。

我做错了什么？还是有更好的方法？

你的问题已经被解决了数千次，你绑定到.Subhidden_arrow和.当第一个类尚不存在时，Subshown_arrow类。您需要以不同的方式绑定事件：

$（'

body'）.on（'click'， '.Subhidden_arrow'， 函数 （ e ） {}）;

这也适用于动态创建（更改）的元素。

如果您使用

.on它将在类更改时工作，因为将为其分配新的处理程序。 但是当你使用.click时，它会协同到最初具有匹配类的对象，虽然类已经改变，但仍然将旧的处理程序分配给它。

var main = function() {

$("body").on("click",".Subshown_arrow",function() {
    alert("Subshown_arrow clicked!");
    $(this).removeClass("Subshown_arrow").addClass("Subhidden_arrow");
});
$("body").on("click","Subhidden_arrow",function() {
    alert("Subhidden_arrow clicked!");
    $(this).removeClass("Subhidden_arrow").addClass("Subshown_arrow");
});
};

您正在使用没有任何src的img，如果您有更多图像，那么我会提到不要使用相同的ID。

因此，您可以做的是为元素提供一个通用类名： 

 <img class="arrow Subshown_arrow" />
 <!----------^^^^^-------like this one---->

现在，您可以使用类arrow绑定 click 事件，并且可以使用toggleClass()方法来更改类： 

$(".arrow").click(function() {
    $(this).toggleClass("Subshown_arrow Subhidden_arrow");
});

如前所述，问题是单击在文档加载时绑定，此时没有具有类subhidden_arrow的元素。这确实可以通过使用父元素单击和使用 （on 对类进行过滤器来解决。但是，原始绑定单击事件也可以重用于切换类：

$(".Subshown_arrow").click(function() {
    $(this).toggleClass("Subshown_arrow").toggleClass("Subhidden_arrow");
});

单击在加载时绑定到元素，并对两个"状态"做出反应，无论它当时持有哪个类。

一个示例 摆弄稍作改动，使包含的锚点对单击事件做出反应。

更好的方法 

var main = function() {
$("#arrow").click(function() {
$(this).toggleClass("Subshown_arrow").toggleClass("Subhidden_arrow"); 
});
};
$(document).ready(main);
相关文章：