我使用jQuery SVG。我不能向对象添加或删除类。有人知道我的错误吗?
SVG:
<rect class="jimmy" id="p5" x="200" y="200" width="100" height="100" />
jQuery不会添加类:
$(".jimmy").click(function() {
$(this).addClass("clicked");
});
我知道SVG和jQuery一起工作很好,因为我可以瞄准对象,并在点击时发出警报:
$(".jimmy").click(function() {
alert('Handler for .click() called.');
});
jQuery不支持SVG元素的类。您可以直接获取元素$(el).get(0),并使用classList和添加/删除。这也有一个技巧,最上面的SVG元素实际上是一个普通的DOM对象,可以像jQuery中的其他元素一样使用。在我的项目中,我创建了这个来照顾我需要的东西,但Mozilla开发者网络上提供的文档有一个垫片,可以用作替代方案。
例子
function addRemoveClass(jqEl, className, addOrRemove)
{
var classAttr = jqEl.attr('class');
if (!addOrRemove) {
classAttr = classAttr.replace(new RegExp('\\s?' + className), '');
jqEl.attr('class', classAttr);
} else {
classAttr = classAttr + (classAttr.length === 0 ? '' : ' ') + className;
jqEl.attr('class', classAttr);
}
}
一个更困难的选择是使用D3.js作为你的选择器引擎。我的项目有用它构建的图表,所以它也在我的应用范围内。D3正确地修改了普通DOM元素和SVG元素的类属性。不过在这种情况下添加D3可能会过量。
d3.select(el).classed('myclass', true);
如果你有动态类或者不知道什么类可以被应用,那么我认为这个方法是最好的方法:
// addClass
$('path').attr('class', function(index, classNames) {
return classNames + ' class-name';
});
// removeClass
$('path').attr('class', function(index, classNames) {
return classNames.replace('class-name', '');
});
jQuery 2.2支持SVG类操作
jQuery 2.2和1.12发布的帖子包括以下引用:
While jQuery is a HTML library, we agreed that class support for SVG elements could be useful. Users will now be able to call the .addClass(), .removeClass(), .toggleClass(), and .hasClass() methods on SVG. jQuery now changes the class attribute rather than the className property. This also makes the class methods usable in general XML documents. Keep in mind that many other things will not work with SVG, and we still recommend using a library dedicated to SVG if you need anything beyond class manipulation.
jQuery 2.2.0示例
它测试:
.addClass()
.removeClass()
.hasClass()
如果你点击那个小方块,它会改变它的颜色,因为class属性被添加/删除了。
$ (" # x”).click(函数(){
if ($(this).hasClass("clicked")) {
(美元).removeClass(“点击”);
}其他{
(美元).addClass(“点击”);
}
});
.clicked {
填充:红色!重要;
}
< html >
< >头
< script src = " https://code.jquery.com/jquery-2.2.0.js " > < /脚本>
> < /头
身体< >
<svg width="80" height="80">
<rect id="x" width="80" height="80" style="fill:rgb(0,0,255)"/>
< / svg >
身体< / >
< / html >
我在我的项目中写了这个,它很有效……可能,)
$.fn.addSvgClass = function(className) {
var attr
this.each(function() {
attr = $(this).attr('class')
if(attr.indexOf(className) < 0) {
$(this).attr('class', attr+' '+className+ ' ')
}
})
};
$.fn.removeSvgClass = function(className) {
var attr
this.each(function() {
attr = $(this).attr('class')
attr = attr.replace(className , ' ')
$(this).attr('class' , attr)
})
};
例子
$('path').addSvgClass('fillWithOrange')
$('path').removeSvgClass('fillWithOrange')