jQuery \ Javascript - if语句无法正确评估

时间:2016-03-04 13:22:18

标签: javascript jquery if-statement

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

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语句没有正确计算,也就是说,当单击类rosaLC的<button>时,函数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语句。

1 个答案:

答案 0 :(得分: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>