可以't使if-else-jquery语句工作

Can't make the if else jquery statement work

本文关键字：if-else-jquery 语句 工作 可以      更新时间：2024-02-22

我将代码添加到下面的js中。当你点击"注册"或"登录"时，箭头会向上移动/指向，但当你再次关闭它时，它会保持不变。有人能帮我想办法吗？

我试着使用这个帖子，但在这里也做不到

这是我使用的Jquery脚本

$(document).ready(function () {
        $('#login-trigger').click(function () {
            $('#login-content').slideToggle();
            $(this).addClass('active');
            if ($(this).hasClass('active')) $(this).find('span').html('▲');
            $('#signup-content').slideUp();
        })
        $('#signup-trigger').click(function () {
            $('#login-content').slideUp();
            $(this).addClass('active');
            if ($(this).hasClass('active')) $(this).find('span').html('▲');
            $('#signup-content').slideToggle();
        });
    });

这是我的jsfiddle，（我知道有些人不喜欢jsfiddler，但由于我有很多代码，显示我试图用它做什么会容易得多）

问题是，因为您要将活动类添加到其中，点击事件。。然后，您要检查它是否有一个类处于活动状态（这总是正确的）。。。

使用toggleClass（它切换提到的类）而不是addClass，并使用hasClass 进行检查

 $(document).ready(function () {
    $('#login-trigger').click(function () {
         $('#login-content').slideToggle();
         $(this).toggleClass('active');
         if ($(this).hasClass('active')){              
             $(this).find('span').html('▲');
        }else{
           $(this).find('span').html('▼'); 
        }
        $('#signup-content').slideUp();
     });
    .... //same for signup

在这里摆弄

是的I know some people don't pref jsfiddle。。我想你错了，我相信大多数人更喜欢jsfiddle而不是代码本身，因为在fiddle中测试更容易。

您错过了其他部分。

尝试：

$(this).toggleClass('active');
if ($(this).hasClass('active')){
    $(this).find('span').html('▲');
}
else{
    $(this).find('span').html('▰');//code of down arrow
}

在这里打转

您永远不会删除活动的类，所以在第一次单击后，它看起来总是活动的，而且在第一次点击后，您也永远不会更改三角形。

此代码应适用于登录：

$('#login-trigger').click(function () {
        $('#login-content').slideToggle();

        if (!$(this).hasClass('active')) { //Now is not active, I'll make it active
            $(this).addClass('active');    //Add class
            $(this).find('span').html('▲');  //BLACK UP-POINTING TRIANGLE
        } else { //Now is active, I'll make it not active
            $(this).removeClass('active');  //Remove class
            $(this).find('span').html('▼');  //BLACK DOWN-POINTING TRIANGLE
        }
       $('#signup-content').slideUp();
    })

这是jsfiddle链接。

相关文章：