Question

我正在尝试添加一个类来突出显示我网页上的某些元素。我正在使用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"));语句。第一个返回正确的元素，第二个没有（在.addClass()之后调用）。元素本身是由传单为地图（来自GeoJSON）创建的<path>元素。因此，HTML很难重现。

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

编辑2：

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

Answer 1

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

toggleHighlight没有被调用。使用console.log进行调试。
$(selector)并没有产生你的想法。使用console.log进行调试。

或许最有可能：

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

请注意，jQuery已经有一个类的切换，因此您的代码可以简化为：

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

Answer 2

问题似乎是jQuery无法更改SVG元素的类：jQuery SVG, why can't I addClass?

为了记录，根据新信息，这是我的解决方案：

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());
}}

jQuery .addClass函数没有添加类

2 个答案: