Как работает toggleClass с SVG?

Question

$(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.Как работает toggleClass с SVG?

Answer 1

исправлено и работает отлично.Пожалуйста, попробуйте следующий фрагмент кода.

$(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>

Answer 2

Хорошо, так два вопроса.Первая проблема заключается в том, что ваша вторая toggleClass ссылается на $('myclass'), но вы, вероятно, на самом деле хотите $('.myclass'), поскольку вы пытаетесь обратиться к имени класса, для которого требуется ..

Вторая проблема, немногоболее актуально, кажется, что jQuery имел проблему до jQuery v3, которая не понимала, как добавлять классы в SVG , если вы не изменили атрибуты с помощью jQuery.attr.Для получения дополнительной информации смотрите в ссылке.

Похоже, что фрагменты стека не содержат его в раскрывающемся списке, но вы можете добавить его в себя.Я пошел дальше и добавил эти обновления для вас.

$(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>