使用jquery的'this'訪問SVG元素屬性？

Question

我試圖通過jQuery函數訪問SVG元素的屬性。我可以通過ID訪問每個元素，但我真正想要的是通過'this'訪問元素。

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> 

當我「本」替換＃卡1或＃卡2，它做什麼，我希望它（即圖像移動到與Y Y = 5 = 10）。但是我真正想要發生的是無論選擇哪個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開發人員工具（命令+期權+ i）或螢火蟲（命令+期權+ I），你可以看到什麼$（這）是看在控制檯。

在那裏你會發現$（this）是未定義的，因爲你是觸發函數內聯。這其中的一個解決方案是通過jQuery的

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

在這裏你會看到每一個你點擊一個卡上時，它會顯示哪一個在控制檯中點擊事件添加到卡。

即使你有上面的函數定義方式，所有你需要做的是

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