Question

我试图通过jQuery函数访问SVG元素的属性。我可以通过ID访问每个元素，但我真正想要的是通过＆＃39;这个＆＃39;来访问元素。

function drawPPF(){
    if (!$("#spreadFormPPF1").is(":visible")) {
    $(this).attr('y', 5);
    $("#spreadFormPPF1").fadeIn("slow");
    } else if ($("#spreadFormPPF1").is(":visible") && !$("#spreadFormPPF2").is(":visible") ) {
        $(this).attr('y', 5);
        $("#spreadFormPPF2").fadeIn("slow");
    } else if ($("#spreadFormPPF2").is(":visible")) 
    {
    $(this).attr('y', 5);
    $("#spreadFormPPF3").fadeIn("slow");
    $("#spreadFormPPFInstruct").fadeIn("slow");  
    }   
};

和html是

 <svg id="spreadOutSVG1" width="600px" height="200px" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
 <image x="50" y="10" width="300" height="200" xlink:href="images/flipcard.jpg" id="card1"onclick="drawPPF();" /> 
 <image x="60" y="10" width="300" height="200" xlink:href="images/flipcard.jpg" id="card2" onclick="drawPPF();" />
 ... 
</svg>

当我有＆＃34;这个＆＃34;用＃card1或＃card2替换，它做我想要的（即从y = 10将图像移动到y = 5）。但我真正想要发生的是无论选择什么SVG元素 - 你知道，这就是 - 改变它的属性，而不是特定的id。我究竟做错了什么？谢谢 - 我是这一切的超级新人，感谢您的帮助！

Answer 1

您可以使用Function.call()将自定义上下文传递给函数执行

<svg id="spreadOutSVG1" width="600px" height="200px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image x="50" y="10" width="300" height="200" xlink:href="images/flipcard.jpg" id="card1" onclick="drawPPF.call(this);" />
    <image x="60" y="10" width="300" height="200" xlink:href="images/flipcard.jpg" id="card2" onclick="drawPPF.call(this);" />
</svg>

Answer 2

找出$(this)实际上是什么的一个好方法是在你点击任何一张牌时将它打印到控制台。

function drawPPF(){
    $this = $(this);
    console.log($this);
    ....
}

然后打开Chrome上的开发人员工具（Command + Option + i）或Firefox上的Firebug（Command + Option + i），您可以通过查看控制台查看$（this）是什么。

你会发现$（this）未定义，原因是你正在触发内联函数。一个解决方案是通过jQuery

向卡添加一个click事件

$('#card1').on('click', function(){
   $this = $(this);
   console.log($this);
   ... //Rest of function, which would be same as top
});

在这里，您将看到每次点击一张卡片时，它都会在控制台中显示哪一张。

即使您已经定义了上述功能，您需要做的只是

$('#card1, #card2').on('click', drawPPF);

使用jquery的'this'访问SVG元素属性？

2 个答案: