Question

我有几个与svg相同的html块。我想通过点击添加切换类。这段代码不起作用。调用Console.log但未添加类。

    $( document ).ready(function() {
        init_svg();
        $('.seat').click(function(){
            if($(this).hasClass('preorder')){
                $(this).removeClass('preorder');
                console.log(1);
            }
            else{
                console.log(2);
                $(this).addClass("preorder");
            }           
        });
    });

    <div class="order" style="top: 260px; right: 370px;">
        <svg version="1.1" id="table-4" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
        style="transform: rotate(-15deg);"
        width="100px" height="100px">
            <circle class="table" cx="60" cy="60" r="30"></circle>
            <circle class="seat" cx="28.888" cy="28.884" r="6"></circle>
            <circle class="seat" cx="17.5" cy="48.608" r="6"></circle>
            <circle class="seat" cx="17.5" cy="71.384" r="6"></circle>
            <circle class="seat" cx="28.888" cy="91.108" r="6"></circle>
            <circle class="seat" cx="48.612" cy="102.497" r="6"></circle>
            <circle class="seat" cx="71.388" cy="102.497" r="6"></circle>
            <circle class="seat" cx="91.113" cy="91.109" r="6"></circle>
            <circle class="seat" cx="102.502" cy="71.385" r="6"></circle>
            <circle class="seat" cx="102.502" cy="48.609" r="6"></circle>
            <circle class="seat" cx="91.114" cy="28.883" r="6"></circle>
        </svg>
      </div>

有什么问题？

Answer 1

JQuery无法将类添加到SVG。

.attr（）适用于SVG，你必须做这样的事情

// Instead of .addClass("newclass")
$("#item").attr("class", "oldclass newclass");
// Instead of .removeClass("newclass")
$("#item").attr("class", "oldclass");

在SO的这个主题上有很好的解释：

jQuery SVG, why can't I addClass?

jquery addClass不能与svg一起使用

1 个答案: