addClass函数没有添加类

jQuery .addClass function not adding class

本文关键字：添加 函数 addClass      更新时间：2023-09-26

我正试图添加一个类来突出显示网页上的某些元素。我使用的是jQuery("selector").addClass("class")函数。然而，它不起作用。

function toggleHighlight(selector, on) {
  if (on) {
    $(selector).addClass("highlighted");
  } else {
    $(selector).removeClass("highlighted");
  }
}

当on参数是true，而selector参数是有效的选择器时，它将进入if子句并退出。不幸的是，选择器引用的元素的类保持不变。我似乎错过了一些相当基本的东西。我们将不胜感激。

编辑：

为了清楚起见，我省略了前面的console.log($(selector));和console.log($(".highlighted"));语句。第一个返回right元素，第二个返回none（在.addClass()之后调用）。元素本身是由地图传单创建的<path>元素（来自GeoJSON）。因此，HTML很难复制。

我直接从JS控制台调用了页面上的按钮形式的函数：<input type="button" id="toggle-0702" class="btn btn-default" onClick="toggleHighlight('.node-0112', true)" value="turn on" '>。同样的结果。

编辑2:

显然，这是<path>元素或（更可能）传单的问题。为了证明这一点：http://jsfiddle.net/mrz40jgw/.请注意第二个圆上的shy类。

我们没有足够的信息来确切说明发生了什么，但除非您干扰了jQuery，否则我们可以排除addClass损坏的可能性。因此，以下情况之一可能是正确的：

  • 当您认为toggleHighlight没有被调用时，请使用console.log来调试它
  • $(selector)没有产生您认为的结果。请使用console.log对此进行调试

或者可能最有可能：

  • 添加类highlight不会以您认为应该的方式影响目标元素，这可能是由于选择器具有更高的特异性。通过手动设置类来调试它，并验证它如何影响元素的视觉属性

请注意，jQuery已经为类提供了切换，因此您的代码可以简化为：

function toggleHighlight(selector, on) {
  $(selector).toggleClass("highlighted", on);
}

问题似乎在于jQuery无法更改SVG元素上的类：jQuery SVG，为什么可以'；我不添加Class吗？

为了记录在案，以下是我根据新信息提出的解决方案：

function toggleHighlight(selector, on) {
    var oldClasses = [];
    var newClasses = "";
    var elements = $(selector)
    for (var i = 0; i < elements.length; i++) {
        oldClasses = $(elements[i]).attr("class").split(" ");
        newClasses = "";
        for (var j in oldClasses) {
            if (oldClasses[j] != "highlighted") {
                newClasses += " " + oldClasses[j];
        }}
        if (on) {
            newClasses += " highlighted";
        }
        $(elements[i]).attr("class", newClasses.trim());
}}
相关文章：