Question

我在jQuery中使用很多show / hide或toggle方法。

现在我正在努力使用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

尝试以下代码。

$(".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");
});

jQuery与SVG切换

3 个答案: