jQuery 删除或隐藏画布上的所有 svg答案

【问题标题】：jQuery remove or hide all svg on the canvasjQuery 删除或隐藏画布上的所有 svg
【发布时间】：2018-05-16 19:07:44
【问题描述】：

我想删除或隐藏我双击的 svg。

var draw = SVG('output').size(1000, 500);

var table = draw.circle(50)
.fill('#00ff0000')
.stroke('black')]
.center(50, 50);
table.attr("class", "table");

$("svg").on('dblclick',function(event){
           $(".table").hide(); 
        });

var desk = draw.rect(50,50)
.fill('green')
.stroke('black')
.move(100,0);
desk.attr("class", "desk");

$("svg").on('dblclick',function(event){
           $(".desk").hide(); 
        });

var chair = draw.rect(50,50)
.fill('green')
.stroke('black')
.move(200,0);
desk.attr("class", "chair");

$("svg").on('dblclick',function(event){
           $(".chair").hide(); 
        });


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
<div id="output"></div>

我想隐藏我双击的那个，但现在的结果是，如果我双击它们中的任何一个，它们都会被隐藏。即使我双击画布的空白区域，所有的SVG图像也都被隐藏了。

【问题讨论】：

标签： javascript jquery html canvas svg

【解决方案1】：

当您编写 $("svg") 时，它针对页面上的每个 svg 元素。例如，当此代码运行 $("svg").on('dblclick',function(event){ $(".table").hide(); }); 时，页面上的每个 SVG 都会获得 "dblclick" 事件以隐藏 ".table"。为了解决这个问题，不要全局选择所有 svg 元素，而是使用 CSS 选择器 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors 只获取与你给它的类相关的 svg（例如，也许你想要 $("svg.table").on('dblclick') 或类似的东西）

【讨论】：