隐藏和显示 div onclick svg答案

【问题标题】：Hide and show div onclick svg隐藏和显示 div onclick svg
【发布时间】：2021-02-16 23:35:20
【问题描述】：

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

【问题讨论】：

hoverplayer() 您何时以及如何调用此函数？
注意点 - polygon 不是 self 关闭标签，所以如果 self 关闭它将使 #rectangle 元素在其中呈现。所以使用</polygon> 相应地关闭它，否则无论你尝试hide 或show 都不会按预期工作..
是$('#cercle_tourne') 错字吗？或者你有id为cercle_tourne的元素？
我已经关闭了它，谢谢你的信息！ #cercle_tourne 只是围绕其他路径的路径 image.noelshack.com/fichiers/2015/33/… 这是 svg 的图像，“#cercle_tourne”是围绕它的圆圈，“三角形”是播放按钮，矩形是其他两个形状。在图像上，您可以看到当我单击它时会发生什么，矩形会显示，但三角形不会消失！你想让我也发布 svg 代码吗？
和 hoverplayer() 在我放在那里的代码之后被调用。我想这应该不是问题，因为当我使用悬停而不是点击时它确实有效，对吧？

标签： jquery html svg

【解决方案1】：

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

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

希望以上内容有所帮助。

【讨论】：

很好用！我的意思是三角形确实会相应地显示出来！现在的问题是矩形总是显示，而我只希望在隐藏三角形时显示它！我怎么做？ - 编辑！我刚刚为矩形添加了两条线，它工作得很好！谢谢你们的帮助！！ :)
添加 $('#rectangle').hide();在 if 条件和 else 添加 $('#rectangle').show();但它会根据三角形的显示来工作......

【解决方案2】：

您想通过按钮切换查看哪一个？没错

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

【讨论】：

不应该是.css('display')=="block"吗？
你说到点子上了，但你应该在 OPs 代码中实现它
@GuruprasadRao 哦，是的，我很糟糕

【解决方案3】：

你可以试试这个。

CSS：

.hide{
  display:none !important;
}

JavaScript：

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

});

你可以根据你的场景添加你自己的条件

【讨论】：

【解决方案4】：

$('.yourButton').click(function(event){ event.preventDefault();//如果你使用的是锚标签，如果不是，则删除它

$('.yourButton').click(function(event){
    //event.preventDefault();//incase you're using an anchor
    $('#triangle').toggle('display');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button type="button" class="yourButton">Click Me!</button>
<p id="triangle" style="display:none">Here I Am..!</p>

$('#triangle').toggle('display');

});

【讨论】：

您的代码格式似乎有误。尝试编辑它看起来更好，它也将有助于可读性
$('#triangle').toggle('display');函数将为您的多边形添加显示无属性只需使用切换功能，它将更改隐藏以显示和显示以隐藏您的多边形的属性
toggle("display") 会将块中的 display 属性更改为 none，将 none 更改为块