jQuery .addClass 函數不添加類

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")); 為了清楚起見，之前的聲明。 第一個返回正確的元素，第二個返回 none（在.addClass()之后.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，為什么我不能 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());
}}