Question

我试图在SVG元素中添加或删除一个类，因此我使用attr（）而不是toggleClass。但似乎它只是一次只读取if语句而不是每次单击它。它将添加类'ani'但不会删除它。非常感谢任何帮助，谢谢。

这是我的剧本：

$('.svgContainer').on('click', '.menu-icon', function () {
    var line1 = $('.line1');
    var line2 = $('.line2');
    $(this).toggleClass('open');
    $('.moduleSlide').toggleClass('open');
    if (line1.hasClass('ani')) {
        line1.attr('class', 'line1 line');
        line2.attr('class', 'line2 line');
        console.log('el does not have class ani');
    } else if (!line1.hasClass('ani')) {
        line1.attr('class', 'line1 line ani');
        line2.attr('class', 'line2 line ani');
        console.log('el has class ani');
    }
});

这是我的HTML：

<div class="svgContainer">
    <div class="menu-icon">
        <svg class="lineWrap" width="50" height="50">
            <g class="line1 line">
                <rect width="13" height="2" />
            </g>
            <g class="line2 line">
                <rect width="13" height="2" />
            </g>
        </svg>
    </div>
</div>

Answer 1

我不认为class属性与SVG的作用相同，您需要这样做以获得正确的true / false。

line1[0].classList.contains('ani')

小提琴：http://jsfiddle.net/AtheistP3ace/ehd33boy/

似乎jQuery在SVG上无声地失败，因为className返回SVGAnimatedString对象而不是普通字符串。

编辑：似乎这已经在jQuery 3.0中得到修复，但从2.1.3开始它仍然失败

您也可以这样做：

line1.attr('class').indexOf('ani') !== -1

小提琴：http://jsfiddle.net/AtheistP3ace/ehd33boy/1/

if else语句没有基于jquery中的语句删除类

1 个答案: