使用JQuery我無法刪除類並將類添加到我的SVG

Question

我想使用JQuery單擊事件來刪除一個類並添加一個不同的類，但是我的SVG對象沒有按預期更改填充。

$(".seat").click(function (event) { 
     var result = $(this).data("seat"); 
     var state = $(this).data("state"); 
     $(this).removeClass("seat").addClass("taken"); 
     result = result +" - "+ state; 
     $("#statusBox").html(result); 

     }); 

我JS提琴是Here

Answer 1

不幸的是，class不起作用同爲SVG的標籤，它爲標準的HTML，至少對於jQuery的。不要像對待課程那樣對待它，你需要把它當作屬性來對待。

$(".seat").on('click',function(e){ 
    var $this = $(this), 
     $data = $this.data(); 

    $this.attr('class','taken'); 

    $("#statusBox").html($data.seat +" - "+ $data.state); 
}); 

既然你刪除了唯一的類存在並賦予它一個新的類，我只是分配class的taken新值的屬性。如果您的實際代碼更復雜且具有多個類名，則可能需要具有創造性，但概念保持不變......替換屬性字符串值的該部分。

我也更新了你的代碼，以提高效率，希望這很酷。 Here is the working jsFiddle.

Answer 2

我不認爲addClass()或removeClass()與svg一起使用。如果我沒有記錯，您需要使用.attr()

Demo Fiddle

JS：

$(".seat").click(function (event) { 
     var result = $(this).data("seat"); 
     var state = $(this).data("state"); 
     $(this).attr('class', 'taken'); 
     result = result +" - "+ state; 
     $("#statusBox").html(result);      
});