Question

大家好，我的问题很简单，但它不起作用上帝知道为什么

<polygon id="triangle" fill="none" stroke="#EB9381" stroke-miterlimit="10" points="66.233,110.916 114.721,83 66.233,55.083  "/>
<g id="rectangle">
    <rect x="90.908" y="64.82" fill="none" stroke="#EB9381" stroke-miterlimit="10" width="5" height="38" />
    <rect x="71.908" y="64.82" fill="none" stroke="#EB9381" stroke-miterlimit="10" width="5" height="38"/>
</g>

这是我的jquery，我正在尝试做的基本上是在点击时隐藏三角形id =“triangle”并显示矩形。我尝试过悬停效果，它确实有效。但是点击选项没有，我不知道为什么......

function hoverplayer()
{
    $('#rectangle').hide();
    $('#cercle_tourne').click(
        function()
        {
            $('#triangle').hide();
        },
        function()
        {
            $('#rectangle').show();
        }
    );
}

我是jQuery的新手，实际上也是javascript所以我可能做错了。

Answer 1

您想要使用按钮切换查看哪一个？是的确定

$('.yourButton').click(function(event){
    event.preventDefault();//incase you're using an anchor
    if($('#triangle').css('display')=='block'){//check if triangle is showing
        $('#triangle').hide();
        $('rectangle').show();
    }else{
        $('#triangle').show();
        $('#rectangle').hide();
    }
});

Answer 2

您可以尝试下面的内容！但要确保'cercle_tourne'是一个容器或按钮。点击它会显示控件（三角形），第二次点击它会隐藏它。

$('#cercle_tourne').click(function(){
    if($('#triangle').css('display') == 'none'){
        $('#triangle').show();
    }else{
        $('#triangle').hide();
    }
});

希望以上有所帮助。

Answer 3

你可以试试这个。

<强> CSS：

.hide{
  display:none !important;
}

JavaScript：

$('#cercle_tourne').click(function(){
   if($('#triangle').hasClass('hide'))
   {
      $('#triangle').removeClass('hide');
   }
   else
   {
      $('#triangle').addClass('hide');
   }

});

您可以根据自己的情况添加自己的条件

隐藏并显示div onclick svg

3 个答案: