javascript - jQuery\Javascript - if 语句无法正确计算

Question

我正在使用以下代码构建一个网页:

function change () 
{
    if($(this).hasClass("rosaLC"));
    {
        $(this).toggleClass('rosaLCb');
    }
    if ($(this).hasClass('rosaBC'));
    {
        $(this).toggleClass('rosaBCb'); 
    }
}

在html上，触发该功能的按钮如下:

<div class="row">
    <article class="columnLeft">
        <div class=rosa>    
            <button onclick="playVid('crux');change.call(this)" class=rosaLC style="top:28px; left:75px;" ></button>
            <button onclick="playVid('gloria');change.call(this)" class=rosaBC style="top:460px; right:131px;"></button>
        </div>
    </article>
</div>

但是，当函数 change()被调用时，if 语句无法正确计算，即当 <button> 时单击 rosaLC 类的函数 change ()添加 rosaLCb 和 rosaBCb 类，原始 rosaLC 类不会切换，按钮仍然包含 3 个类: <button onclick="playVid('crux');change.call(this)" class="rosaLC rosaLCb rosaBCb" style="top:20px; left:86px;"></button>

出了什么问题？

作为解决方法，我将该函数拆分为两个函数:

function change (thisObj) 
{
    $(thisObj).toggleClass('rosaLC rosaLCb');

}
function change1 (thisObj) 
{
    $(thisObj).toggleClass('rosaBC rosaBCb');
}

并更改 html button :

<button onclick="playVid('gloria');change1(this)" class=rosaBC style="top:36px; right:58px;"></button>
<button onclick="playVid('crux');change(this)" class=rosaLC style="top:28px; left:75px;" ></button>

这是唯一能按我的意愿工作的方法，但我仍然不明白原始代码有什么问题，主要是关于 if声明。

Answer 1

您没有定义用什么来切换它

只需这样做

function change () 
{
        $(this).toggleClass('rosaLC rosaLCb');
        $(this).toggleClass('rosaBC rosaBCb'); 
}

此外，传递元素对象而不是使用 this ，因为这样它就可以重复用于除按钮单击(另一个元素上的其他事件)之外的目的

function change (thisObj) 
{
        $(thisObj).toggleClass('rosaLC rosaLCb');
        $(thisObj).toggleClass('rosaBC rosaBCb'); 
}

并将其调用为

<button onclick="playVid('crux');change(this)" class=rosaLC style="top:28px; left:75px;" ></button>