Question

我想删除或隐藏我双击的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图像。

Answer 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')或类似的东西）

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

1 个答案: