我正在使用jQuery在SVG块内的’circle’元素上设置和删除一个类.这适用于我测试的所有最近的浏览器,但导致IE中的错误(9& 10,可能全部).
jQuery(document).ready(function($) {
console.log('Console running');
var $circle = $('svg circle'),clicked = false;
$circle.on({
click: function(e) {
setClick($(this));
}
});
function removeClick(callback) {
$('svg').find('.clicked').removeAttr("class");
console.log('clicked removed');
callback();
}
function setClick($this) {
removeClick(function() {
$this.attr("class","clicked").queue(function() {
console.log('clicked added');
clicked = true;
}).dequeue();
});
}
});
circle.clicked {
fill:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pseudo-page cf">
<div class="svg-container" style="position: relative; height: 0; width: 100%; padding: 0; padding-bottom: 100%;">
<svg style="position: absolute; height: 100%; width: 100%; left: 0; top: 0;" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" x="0" y="0" fill="#cccccc" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 450 350" xml:space="preserve">
<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
<g>
<circle cx="30" cy="25" r="10" fill="#ff0000" stroke="#000" stroke-miterlimit="10"/>
<circle cx="80" cy="30" r="10" fill="#ff0000" stroke="#000" stroke-miterlimit="10"/>
<circle cx="50" cy="60" r="10" fill="#ff0000" stroke="#000" stroke-miterlimit="10"/>
</g>
</svg>
</div>
</div>
这是一个更大的脚本的一部分,它考虑了许多其他操作.我已经删除了相关的错误引发位.
在IE中,’find’行会导致错误：
SCRIPT438: Object doesn't support property or method 'getElementsByClassName' jquery.min.js,line 2 character 6670
有没有更好或正确的方法来搜索“点击”类的所有元素？顺便说一句,我没有用它来设计元素,我只添加了绿色风格,以明确它是否有效.
谢谢！
解决方法
感谢@Marlin,我找到了适合您的解决方案.代替：
$('svg').find('.clicked').removeAttr("class");
使用
$('svg').find('[class=clicked]').removeAttr("class");
jQuery不会在SVG对象(https://github.com/jquery/sizzle/issues/322)中使用getElementsByClassName进行元素选择.
