使用jQuery find定位SVG元素仅在IE中失败 [英] Using jQuery find to target SVG elements fails in IE only

问题描述

我正在使用jQuery在SVG块内的'circle'元素上设置和删除类.这在我测试过的所有最新浏览器中都有效，但会导致IE错误(9和10，可能是所有浏览器).

I'm setting and removing a class on a 'circle' element inside an SVG block with jQuery. This works in all recent browsers I've tested but results in an error in IE (9 & 10, possibly all of them).

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>

这是一个更大的脚本的一部分，该脚本考虑了许多其他操作.我已经删除了相关的和引起错误的位.

This is part of a much larger script that takes into account lots of other actions. I've stripped out the relevant and error-inducing bits.

在IE中，查找"行导致错误:

In IE, the 'find' line results in the error:

SCRIPT438: Object doesn't support property or method 'getElementsByClassName'
jquery.min.js, line 2 character 6670

是否有更好或正确的方法来搜索带有"clicked"类的所有元素?顺便说一句，我没有使用它来设置元素的样式，我只是添加了绿色样式以使它显而易见是否起作用.

Is there a better or correct way to search for all elements with the 'clicked' class? By the way, I'm not using this to style elements, I only added the green style to make it obvious that it's worked or not.

谢谢！

推荐答案

感谢@Marlin，我为您找到了可行的解决方案.代替:

Thanks to @Marlin I found working solution for you. Instead of:

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

使用

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

jQuery不会在SVG对象中使用 getElementsByClassName 进行元素选择(https://github.com/jquery/sizzle/issues/322 ).

jQuery won't use getElementsByClassName for elements selection inside SVG object (https://github.com/jquery/sizzle/issues/322).

这篇关于使用jQuery find定位SVG元素仅在IE中失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！