對於SVG元素，jQuery .hasClass（）方法失敗

我有一組類似於node和link的SVG元素。我的程序應該在懸停在任何SVG元素上時檢測元素是否有node類或link類。然而，出於某種原因，該.hasClass()似乎不工作：對於SVG元素，jQuery .hasClass（）方法失敗

$(".node").hover(function(evt){ 
    console.log($(this).attr("class")); //returns "node" 
    console.log($(this).hasClass('node')); //returns false 
}, function(){console.log("Done");});

所以我在徘徊元素具有類node和jQuery檢測過，如圖console.log($(this).attr("class"));，但由於某些原因，實際.hasClass()失敗。爲什麼是這樣？是否因爲SVG而失敗？

來源

2013-07-24 Shrey Gupta

只是一個側面說明，你就是缺少'）;'到底:)以及，似乎爲我工作（http://jsfiddle.net/hungerpain/V4BNT /） – krishgopinath

有趣...嘗試設置一個變量等於'$（this）.attr（「class」）'然後使用'hasClass'與該變量。仍然是假的？ – tymeJV

SVG中的元素並不是真正的HTML，因此這些元素缺少屬性，這就是爲什麼獲取該屬性的原因，但使用hasClass（可能檢查className屬性）不起作用。 – adeneo

HTML元素的類屬性在SVG中的含義不同。

$("<b></b>").addClass($(this).attr("class")).hasClass("node")

或者

/(^|\s)node(\s|$)/.test($(this).attr("class"))

的SVG元素。

編輯 .hasClass似乎只是正常工作（至少在IE9和FF）http://jsfiddle.net/X6BPX/1/

所以，問題可能出在以下任意組合：使用過時的語法錯誤，使用過時的瀏覽器，版本的jQuery。

來源

2013-07-24 17:41:37

SVG中'class'是什麼意思？ – Bergi

@Bergi - 它只是一個常規的屬性，而不是一個特殊的樣式屬性，就像它在HTML元素中使用瀏覽器特定的鉤子，比如className和class。 –

http://www.w3.org/TR/SVG/styling.html#ClassAttribute – Bergi

-4

作品。但一定要關閉該功能

$(".node").hover(function(evt){ 
    console.log($(this).attr("class")); //returns "node" 
    console.log($(this).hasClass('node')); //returns false 
}, function(){console.log("Done");});

http://jsfiddle.net/X6BPX/

來源

2013-07-24 17:46:44

謝謝瑞克，但我在評論中澄清，缺少的括號是一個錯字。我在電腦上的功能已關閉。 –

即時。沒讀過。但它的工作原理:) –

@Rick：當hasClass（'node'）'返回false時，這是如何工作的？！ – Tom

由於BERGI在評論中指出，jQuery的默默失敗對帳戶的className SVG元素返回一個SVGAnimatedString對象，而不是一個正常的DOMString。

請參閱this JSFiddle進行比較。

我很想提交關於此一拉請求，但做了一個快速搜索項目，顯然對SVG的問題了jQuery項目的立場是wontfix：https://github.com/jquery/jquery/pull/1511

如果您使用D3，你可以使用d3.select(this).classed('node') 。請注意，D3正確返回HTML元素和SVG元素。

來源

2014-07-15 14:45:27

這不是有史以來最快的選擇，但它是一種可能的解決方案。您可以使用jQuery的hasClass而不是使用jQuery的class屬性作爲字符串，並使用indexOf來搜索它。這可能會失敗，所以我不會推薦這個，除非是超級簡單的項目。

工作例如：

var s = $(this).attr('class'); 
if(s.indexOf('node')!==-1){ 
    // do something 
}

記住：indexOf回報-1時，它無法找到任何東西，不0。子字符串在索引0處開始時返回0。

來源

2015-09-24 21:01:15

這是在jQuery 3.x.x版本之前針對addClass，removeClass，hasClass jquery方法的一種破解。

$.fn.extend({ 
    addSVGClass: function (cls) { 
     return this.each(function() { 
      var classList = $(this).attr('class'); 
      if (classList) { 
       var classListArr = classList.split(" "); 
       if (classListArr.indexOf(cls) === -1) { 
        classListArr.push(cls); 
        classList = classListArr.join(" ").trim(); 
        $(this).attr('class', classList); 
       } 
      } else { 
       $(this).attr('class', cls); 
      } 
     }); 
    }, 
    removeSVGClass: function (cls) { 
     return this.each(function() { 
      var classList = $(this).attr('class'); 
      if (classList) { 
       var classListArr = classList.split(" "); 
       if (classListArr.indexOf(cls) !== -1) { 
        delete classListArr[classListArr.indexOf(cls)]; 
        classList = classListArr.join(" ").trim(); 
        $(this).attr('class', classList); 
       } 
      } 

     }); 
    }, 
    hasSVGClass: function (cls) { 
     var el = this[0]; 
     var classList = $(el).attr('class'); 
     if (classList) { 
      var classListArr = classList.split(" "); 
      if (classListArr.indexOf(cls) !== -1) { 
       return true; 

      } else { 
       return false; 
      } 
     } 
     return false; 
    } 
});

用法：

$('.svg-element').addSVGClass('selected');

來源

2017-10-13 02:48:50

對於SVG元素，jQuery .hasClass（）方法失敗

回答

相關問題