toggleClass与SVG一起工作如何？

时间：2018-09-28 22:23:40

标签： javascript html css svg 

$(document).ready(function(){
$('#myid').click(function(){
$(this).toggleClass('open');
$('.myclass').find('svg.adcl').toggleClass('test');  

});
});
.IconNav-img{font-size:30px;width:3em;}
.test{width:10em!important;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myid" class="some">
	<div class="myclass">
	
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="adcl IconNav-img mb-1"><title>1clr-code-review</title><path d="M53 14H36.54l-3.11-4.66A3 3 0 0 0 30.93 8H11a3 3 0 0 0-3 3v34a3 3 0 0 0 3 3h21v5a3 3 0 0 0 3 3h8.06a1 1 0 0 1 .77.36l2.63 3.16a2 2 0 0 0 1.53.72 2 2 0 0 0 .69-.12A2 2 0 0 0 50 58.24V48h3a3 3 0 0 0 3-3V17a3 3 0 0 0-3-3zm-21.24-3.55L34.13 14h-5.06a1 1 0 0 1-.83-.45L25.87 10h5.06a1 1 0 0 1 .83.45zM10 11a1 1 0 0 1 1-1h11.93a1 1 0 0 1 .83.45l2.81 4.22a3 3 0 0 0 2.5 1.33H53a1 1 0 0 1 1 1v4H10zm38 47.24l-2.63-3.16A3 3 0 0 0 43.06 54H35a1 1 0 0 1-1-1V43a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zM53 46h-3v-3a3 3 0 0 0-3-3H35a3 3 0 0 0-3 3v3H11a1 1 0 0 1-1-1V23h44v22a1 1 0 0 1-1 1z" fill="#23292f"></path><path d="M21 29h-2v-2a1 1 0 0 0-2 0v2h-2a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2zM27 31h12a1 1 0 0 0 0-2H27a1 1 0 0 0 0 2zM49 29h-6a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2zM34 34h-7a1 1 0 0 0 0 2h7a1 1 0 0 0 0-2zM49 34H38a1 1 0 0 0 0 2h11a1 1 0 0 0 0-2zM43.29 45.29L40 48.59l-1.29-1.29a1 1 0 0 0-1.41 1.41l2 2a1 1 0 0 0 1.41 0l4-4a1 1 0 0 0-1.41-1.41z" fill="#23292f"></path><circle cx="13" cy="13" r="1" fill="#23292f"></circle><circle cx="17" cy="13" r="1" fill="#23292f"></circle><circle cx="21" cy="13" r="1" fill="#23292f"></circle></svg>


	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="IconNav-img mb-1"><title>1clr-social-coding</title><path d="M25.34 48.7a5 5 0 1 0-6.66 0A7.86 7.86 0 0 0 14 54.77a1 1 0 1 0 2 .23 6 6 0 0 1 6-5 5.91 5.91 0 0 1 6 5.11 1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1 7.71 7.71 0 0 0-4.65-6.2zM19 45a3 3 0 1 1 3 3 3 3 0 0 1-3-3zM45.34 48.7a5 5 0 1 0-6.66 0A7.86 7.86 0 0 0 34 54.77a1 1 0 1 0 2 .23 6 6 0 0 1 6-5 5.91 5.91 0 0 1 6 5.11 1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1 7.71 7.71 0 0 0-4.65-6.2zM39 45a3 3 0 1 1 3 3 3 3 0 0 1-3-3zM33.33 14a1 1 0 0 0-1.19.76l-2.22 10a1 1 0 0 0 .75 1.24h.22a1 1 0 0 0 1-.78l2.22-10a1 1 0 0 0-.78-1.22zM24.7 16.29a1 1 0 0 0-1.41 0l-3 3a1 1 0 0 0 0 1.4l3 3a1 1 0 1 0 1.42-1.4L22.45 20l2.27-2.3a1 1 0 0 0-.02-1.41zM40.71 16.3a1 1 0 1 0-1.42 1.4l2.26 2.3-2.27 2.3a1 1 0 1 0 1.42 1.4l3-3a1 1 0 0 0 0-1.4z" fill="#23292f"></path><path d="M53 8H11a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h7.59l2.71 2.71a1 1 0 0 0 1.41 0l2.7-2.71h13.18l2.71 2.71a1 1 0 0 0 1.41 0l2.7-2.71H53a3 3 0 0 0 3-3V11a3 3 0 0 0-3-3zm1 21a1 1 0 0 1-1 1h-8a1 1 0 0 0-.71.29L42 32.59l-2.29-2.29A1 1 0 0 0 39 30H25a1 1 0 0 0-.71.29L22 32.59l-2.29-2.29A1 1 0 0 0 19 30h-8a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h42a1 1 0 0 1 1 1z" fill="#23292f"></path></svg>
  Title
  </div>	
	</div>

单击myid时，将使用SVG切换测试类。 SVG的toggleClass如何工作？

2 个答案:

答案 0 :(得分：0)

好吧，有两个问题。第一个问题是您的第二个toggleClass引用了$('myclass')，但是实际上您可能想要$('.myclass')，因为您试图引用的类名需要.。

第二个问题，更迫切的是，除非您使用jQuery.attr修改了属性，否则看来jQuery had an issue before jQuery v3 that didn't understand how to add classes to SVGs还是如此。有关更多信息，请单击链接。

看起来Stack片段在下拉列表中没有它，但是您可以自己添加。我继续为您添加了这些更新。

$(document).ready(function(){
$('#myid').click(function(){
$(this).toggleClass('open');
$('.myclass').find('svg.adcl').toggleClass('test');  

});
});
.IconNav-img{font-size:30px;width:3em;}
.test{width:10em!important;}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="myid" class="some">
	<div class="myclass">
	
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="adcl IconNav-img mb-1"><title>1clr-code-review</title><path d="M53 14H36.54l-3.11-4.66A3 3 0 0 0 30.93 8H11a3 3 0 0 0-3 3v34a3 3 0 0 0 3 3h21v5a3 3 0 0 0 3 3h8.06a1 1 0 0 1 .77.36l2.63 3.16a2 2 0 0 0 1.53.72 2 2 0 0 0 .69-.12A2 2 0 0 0 50 58.24V48h3a3 3 0 0 0 3-3V17a3 3 0 0 0-3-3zm-21.24-3.55L34.13 14h-5.06a1 1 0 0 1-.83-.45L25.87 10h5.06a1 1 0 0 1 .83.45zM10 11a1 1 0 0 1 1-1h11.93a1 1 0 0 1 .83.45l2.81 4.22a3 3 0 0 0 2.5 1.33H53a1 1 0 0 1 1 1v4H10zm38 47.24l-2.63-3.16A3 3 0 0 0 43.06 54H35a1 1 0 0 1-1-1V43a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zM53 46h-3v-3a3 3 0 0 0-3-3H35a3 3 0 0 0-3 3v3H11a1 1 0 0 1-1-1V23h44v22a1 1 0 0 1-1 1z" fill="#23292f"></path><path d="M21 29h-2v-2a1 1 0 0 0-2 0v2h-2a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2zM27 31h12a1 1 0 0 0 0-2H27a1 1 0 0 0 0 2zM49 29h-6a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2zM34 34h-7a1 1 0 0 0 0 2h7a1 1 0 0 0 0-2zM49 34H38a1 1 0 0 0 0 2h11a1 1 0 0 0 0-2zM43.29 45.29L40 48.59l-1.29-1.29a1 1 0 0 0-1.41 1.41l2 2a1 1 0 0 0 1.41 0l4-4a1 1 0 0 0-1.41-1.41z" fill="#23292f"></path><circle cx="13" cy="13" r="1" fill="#23292f"></circle><circle cx="17" cy="13" r="1" fill="#23292f"></circle><circle cx="21" cy="13" r="1" fill="#23292f"></circle></svg>


	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="IconNav-img mb-1"><title>1clr-social-coding</title><path d="M25.34 48.7a5 5 0 1 0-6.66 0A7.86 7.86 0 0 0 14 54.77a1 1 0 1 0 2 .23 6 6 0 0 1 6-5 5.91 5.91 0 0 1 6 5.11 1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1 7.71 7.71 0 0 0-4.65-6.2zM19 45a3 3 0 1 1 3 3 3 3 0 0 1-3-3zM45.34 48.7a5 5 0 1 0-6.66 0A7.86 7.86 0 0 0 34 54.77a1 1 0 1 0 2 .23 6 6 0 0 1 6-5 5.91 5.91 0 0 1 6 5.11 1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1 7.71 7.71 0 0 0-4.65-6.2zM39 45a3 3 0 1 1 3 3 3 3 0 0 1-3-3zM33.33 14a1 1 0 0 0-1.19.76l-2.22 10a1 1 0 0 0 .75 1.24h.22a1 1 0 0 0 1-.78l2.22-10a1 1 0 0 0-.78-1.22zM24.7 16.29a1 1 0 0 0-1.41 0l-3 3a1 1 0 0 0 0 1.4l3 3a1 1 0 1 0 1.42-1.4L22.45 20l2.27-2.3a1 1 0 0 0-.02-1.41zM40.71 16.3a1 1 0 1 0-1.42 1.4l2.26 2.3-2.27 2.3a1 1 0 1 0 1.42 1.4l3-3a1 1 0 0 0 0-1.4z" fill="#23292f"></path><path d="M53 8H11a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h7.59l2.71 2.71a1 1 0 0 0 1.41 0l2.7-2.71h13.18l2.71 2.71a1 1 0 0 0 1.41 0l2.7-2.71H53a3 3 0 0 0 3-3V11a3 3 0 0 0-3-3zm1 21a1 1 0 0 1-1 1h-8a1 1 0 0 0-.71.29L42 32.59l-2.29-2.29A1 1 0 0 0 39 30H25a1 1 0 0 0-.71.29L22 32.59l-2.29-2.29A1 1 0 0 0 19 30h-8a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h42a1 1 0 0 1 1 1z" fill="#23292f"></path></svg>
  Title
  </div>	
	</div>

答案 1 :(得分：0)

它已修复且工作正常。请尝试下面的代码段。

$(document).ready(function(){
  	$('#myid').on('click', '.adcl', function() {
    		$(this).toggleClass('test');
    });
});
.IconNav-img{font-size:30px;width:3em;}
.test{width:10em!important;}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="myid" class="some">
	<div class="myclass">
	
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="adcl IconNav-img mb-1"><title>1clr-code-review</title><path d="M53 14H36.54l-3.11-4.66A3 3 0 0 0 30.93 8H11a3 3 0 0 0-3 3v34a3 3 0 0 0 3 3h21v5a3 3 0 0 0 3 3h8.06a1 1 0 0 1 .77.36l2.63 3.16a2 2 0 0 0 1.53.72 2 2 0 0 0 .69-.12A2 2 0 0 0 50 58.24V48h3a3 3 0 0 0 3-3V17a3 3 0 0 0-3-3zm-21.24-3.55L34.13 14h-5.06a1 1 0 0 1-.83-.45L25.87 10h5.06a1 1 0 0 1 .83.45zM10 11a1 1 0 0 1 1-1h11.93a1 1 0 0 1 .83.45l2.81 4.22a3 3 0 0 0 2.5 1.33H53a1 1 0 0 1 1 1v4H10zm38 47.24l-2.63-3.16A3 3 0 0 0 43.06 54H35a1 1 0 0 1-1-1V43a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zM53 46h-3v-3a3 3 0 0 0-3-3H35a3 3 0 0 0-3 3v3H11a1 1 0 0 1-1-1V23h44v22a1 1 0 0 1-1 1z" fill="#23292f"></path><path d="M21 29h-2v-2a1 1 0 0 0-2 0v2h-2a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2zM27 31h12a1 1 0 0 0 0-2H27a1 1 0 0 0 0 2zM49 29h-6a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2zM34 34h-7a1 1 0 0 0 0 2h7a1 1 0 0 0 0-2zM49 34H38a1 1 0 0 0 0 2h11a1 1 0 0 0 0-2zM43.29 45.29L40 48.59l-1.29-1.29a1 1 0 0 0-1.41 1.41l2 2a1 1 0 0 0 1.41 0l4-4a1 1 0 0 0-1.41-1.41z" fill="#23292f"></path><circle cx="13" cy="13" r="1" fill="#23292f"></circle><circle cx="17" cy="13" r="1" fill="#23292f"></circle><circle cx="21" cy="13" r="1" fill="#23292f"></circle></svg>


	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="adcl IconNav-img mb-1"><title>1clr-social-coding</title><path d="M25.34 48.7a5 5 0 1 0-6.66 0A7.86 7.86 0 0 0 14 54.77a1 1 0 1 0 2 .23 6 6 0 0 1 6-5 5.91 5.91 0 0 1 6 5.11 1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1 7.71 7.71 0 0 0-4.65-6.2zM19 45a3 3 0 1 1 3 3 3 3 0 0 1-3-3zM45.34 48.7a5 5 0 1 0-6.66 0A7.86 7.86 0 0 0 34 54.77a1 1 0 1 0 2 .23 6 6 0 0 1 6-5 5.91 5.91 0 0 1 6 5.11 1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1 7.71 7.71 0 0 0-4.65-6.2zM39 45a3 3 0 1 1 3 3 3 3 0 0 1-3-3zM33.33 14a1 1 0 0 0-1.19.76l-2.22 10a1 1 0 0 0 .75 1.24h.22a1 1 0 0 0 1-.78l2.22-10a1 1 0 0 0-.78-1.22zM24.7 16.29a1 1 0 0 0-1.41 0l-3 3a1 1 0 0 0 0 1.4l3 3a1 1 0 1 0 1.42-1.4L22.45 20l2.27-2.3a1 1 0 0 0-.02-1.41zM40.71 16.3a1 1 0 1 0-1.42 1.4l2.26 2.3-2.27 2.3a1 1 0 1 0 1.42 1.4l3-3a1 1 0 0 0 0-1.4z" fill="#23292f"></path><path d="M53 8H11a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h7.59l2.71 2.71a1 1 0 0 0 1.41 0l2.7-2.71h13.18l2.71 2.71a1 1 0 0 0 1.41 0l2.7-2.71H53a3 3 0 0 0 3-3V11a3 3 0 0 0-3-3zm1 21a1 1 0 0 1-1 1h-8a1 1 0 0 0-.71.29L42 32.59l-2.29-2.29A1 1 0 0 0 39 30H25a1 1 0 0 0-.71.29L22 32.59l-2.29-2.29A1 1 0 0 0 19 30h-8a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h42a1 1 0 0 1 1 1z" fill="#23292f"></path></svg>
  Title
  </div>	
	</div>

相关问题
最新问题