Jquery .on（'click'，function（）根据当前类在3个类之间切换

我正在研究一个按钮，其类为'网格'，可以在3个类之间切换，它总是以类'16pads'开始页面被加载，然后点击它应该删除类'16pads'，并替换为'36pads'，然后如果再次点击该按钮，并且hasClass'36pads'，它应该删除类'36pads'并将其替换为'64pads'。最后，如果按钮具有类'64pads'并且被点击，则应该移除类'64pads'并且用'16pads'替换它，当按钮被点击时它基本上循环通过3个类。Jquery .on（'click'，function（）根据当前类在3个类之间切换

由于某些原因，当点击它似乎循环整个序列，而不是一次一个地执行。

我在做什么错？

JQuery的

$('.grid').on('click',function() {  
    if ($(this).hasClass('16pads')); 
    { 
    $(this).removeClass('16pads'); 
    $(this).addClass('36pads'); 
    } 

    if ($(this).hasClass('36pads')); 
    { 
    $(this).removeClass('36pads'); 
    $(this).addClass('64pads'); 
    } 

    if ($(this).hasClass('64pads')); 
    { 
    $(this).removeClass('64pads'); 
    $(this).addClass('16pads'); 
    } 
});

来源

2017-02-22 Jeff

试想一下，你的方法执行的流程：

是否有16pads？是。
将16pads替换为36pads。
现在，它有36pads？是。
更换36pads与64pads等

更换if与else if：

$('.grid').on('click',function() {  
    if ($(this).hasClass('16pads')) 
    { 
    $(this).removeClass('16pads'); 
    $(this).addClass('36pads'); 
    } 
    else 
    if ($(this).hasClass('36pads')) 
    { 
    $(this).removeClass('36pads'); 
    $(this).addClass('64pads'); 
    } 
    else 
    if ($(this).hasClass('64pads')) 
    { 
    $(this).removeClass('64pads'); 
    $(this).addClass('16pads'); 
    } 
});

现在，它改变类只有一次退出该方法。

来源

2017-02-22 03:39:15

感谢您的答复！出于某种原因，我收到了语法错误。 – Jeff

@Jeff它看起来像你的代码中有一个语法错误 - “if”后面不应该有';'。我已经更新了我的答案，试试这个。 –

谢谢！它在移除后正在工作;之后。 – Jeff

你需要添加别的，

，我认为类的名字不好用数量开始像16pads :)

$('.grid').on('click',function() {  
 
    if ($(this).hasClass('t_16pads')) 
 
    { 
 
    $(this).removeClass('t_16pads'); 
 
    $(this).addClass('t_36pads'); 
 
    } 
 

 
    else if ($(this).hasClass('t_36pads')) 
 
    { 
 
    $(this).removeClass('t_36pads'); 
 
    $(this).addClass('t_64pads'); 
 
    } 
 

 
    else if ($(this).hasClass('t_64pads')) 
 
    { 
 
    $(this).removeClass('t_64pads'); 
 
    $(this).addClass('t_16pads'); 
 
    } 
 
});

.t_16pads{ 
 
    font-size:16px; 
 
} 
 
    
 
.t_36pads{ 
 
    font-size:36px; 
 
} 
 
    
 
.t_64pads{ 
 
    font-size:64px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="grid t_16pads">CLICK HERE</div>

来源

2017-02-22 03:58:25 GuaHsu

Jquery .on（'click'，function（）根据当前类在3个类之间切换

回答

相关问题