jQuery toggle with SVG

Question

Я использую много методов show/hide или toggle с jQuery.

Теперь я борюсь с SVG-картой.

До сих пор я пытался, как эти примеры:

$(".runs-toggle").click(function(){ 
     $("#Snow_mashine").toggle(); 
    }); 


    $('.runs-toggle').click(function(){ 
     $("#Snow_mashine").toggleClass('hidden'); 
    }); 

Эти два примера не работает.

.runs-toggle - это кнопка переключения, поэтому сначала нажмите кнопку #Snow_mashine (объект с карты), чтобы скрыть его, и после нажатия снова отобразит #Snow_machine.

Когда я использую так:

$(".runs-toggle").click(function(){ 
    $("#Snow_mashine").hide(); 
}); 

Она скрывает элемент, но если я использую .show() не показывает элемент.

Я читал, вместо использования .addClass() функция .attr() работает с SVG, но я не знаю, как добиться эффекта переключения.

 $('.runs-toggle').click(function(){ 
      $("#Snow_mashine").attr("class","hidden"); 
     }); 

Это добавление скрытого класса к элементу и, когда этот класс не имеет дисплей: ни с CSS, он прекрасно работает, но как я могу показать элемент после второго клика?

Answer 1

Try ниже код.

$(".runs-toggle").click(function(){ 
    if($("#Snow_mashine").css("display")=="block") 
    { 
     $("#Snow_mashine").css("display", "none"); 
    } 
    else 
    { 
     $("#Snow_mashine").css("display", "block"); 
    } 
}); 

Answer 2

Для переключения класса можно использовать toggleClass

$('.runs-toggle').click(function(){ 
    $("#Snow_mashine").toggleClass("hidden"); 
}); 

Answer 3

мне удалось решить эту проблему, как этот

$('.the-thing').attr('class') === 'the-thing hidden' ? $('.the-thing').attr('class', 'the-thing') : $('.the-thing').attr('class', 'the-thing hidden');