Sử dụng jQuery tìm để nhắm mục tiêu các phần tử SVG không thành công trong IE chỉ

Question

Tôi đang đặt và xóa lớp học trên phần tử 'vòng tròn' bên trong khối SVG bằng jQuery. Điều này làm việc trong tất cả các trình duyệt gần đây tôi đã thử nghiệm nhưng kết quả là một lỗi trong IE (9 & 10, có thể là tất cả chúng).

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>

Đây là một phần của một kịch bản lớn hơn nhiều mà sẽ đưa vào nhiều tài khoản của các hành động khác. Tôi đã loại bỏ các bit liên quan và lỗi gây ra.

Trong IE, 'tìm' kết quả dòng trong các lỗi:

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

Có cách nào tốt hơn hoặc đúng để tìm kiếm tất cả các yếu tố với lớp 'nhấp'? Nhân tiện, tôi không sử dụng điều này cho các yếu tố phong cách, tôi chỉ thêm phong cách màu xanh lá cây để làm cho nó rõ ràng rằng nó đã làm việc hay không.

Cảm ơn!

Answer 1

Nhờ @Marlin tôi tìm thấy giải pháp làm việc cho bạn. Thay vì:

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

sử dụng

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

jQuery sẽ không sử dụng getElementsByClassName cho các yếu tố lựa chọn bên SVG đối tượng (https://github.com/jquery/sizzle/issues/322).

Answer 2

Tôi nghi ngờ trang đang tải ở chế độ tương thích IE7.

getElementsByClassName được hỗ trợ bởi tất cả các phiên bản IE từ IE8 trở lên, vì vậy nếu IE phàn nàn rằng nó không được xác định thì nó ngụ ý rằng bạn đang chạy IE7 hoặc phiên bản cũ hơn. Vì bạn nói bạn đang sử dụng IE9 và IE10, tôi đoán điều đó có nghĩa là bạn có thể đang ở chế độ IE7.

Chế độ tương thích IE7 loại bỏ hỗ trợ cho các tính năng khác nhau không có trong IE7, vì vậy bạn sẽ mất hỗ trợ getElementsByClassName. Bạn cũng sẽ không có hỗ trợ cho SVG, mà tất nhiên là khá quan trọng đối với hệ thống của bạn, nhưng đó không phải là nơi vấn đề thực sự xảy ra.

Giải pháp: Thêm phần <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> tag to your HTML `để buộc IE sử dụng chế độ hiển thị tốt nhất có thể.

Answer 3

Trong IE getElementsByClassName có sẵn trên tài liệu chứ không phải trên phần tử SVG.

gì về jQuery sẽ không giải quyết được khoản: https://github.com/jquery/sizzle/issues/322