使用jQuery查找目标SVG元素仅在IE中失败

Question

我正在使用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

有没有更好或正确的方法来搜索"点击"类的所有元素？顺便说一句,我没有用它来设计元素,我只添加了绿色风格,以明确它是否有效.

谢谢!

Answer 1

感谢@Marlin,我找到了适合您的解决方案.代替:

$('svg').find('.clicked').removeAttr("class");

使用

$('svg').find('[class=clicked]').removeAttr("class");

jQuery不会getElementsByClassName用于SVG对象内的元素选择(https://github.com/jquery/sizzle/issues/322).