带有 SVG 的 jQuery 切换

Question

我在 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() 它不会显示元素。

我读过关于 .attr() 函数不是使用 .addClass()，而是使用 SVG，但我不知道如何实现切换效果。

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

它向元素添加隐藏类，当该类具有 display:none 和 CSS 时，效果很好，但是如何在第二次点击后显示元素？

Answer 1

试试下面的代码。

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

Answer 2

我设法像这样解决了这个问题

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

Answer 3

要切换课程，您可以使用toggleClass

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