Question

我正在建立一个基于node.js的网站。我已通过护照实现了所有登录功能，并且我可以通过res.user轻松登录或注销。

但是，我希望在用户未登录时实现该功能，并单击任何链接，应在我的登录按钮上显示工具提示以显示登录。

我尝试过的可能方法：

当我登录用户时，刷新页面后会显示用户名。我尝试用jQuery选择它，如果找不到名称，则显示工具提示。但是，我无法阻止快递导航到另一个页面并显示错误 res.user未定义，这当然是因为我还没有登录。
经过大量的挖掘，我发现它可以用ajax完成，但是，我真的很陌生，并且无法弄清楚如何使用它。

我已经实现了第一个，但工具提示没有显示，这是我的ajax代码：

$(function () {
$('#selfielogin').click(function (e) {
    console.log("alpit");
    e.preventDefault();

    $.ajax({
        url: '/selfie',
        type: 'GET',
        success: function () {
            console.log("*********************");
        },
        error: function() {
          //to show tooltip on login button that you need to login
         }
     });
})
   })

这是我的代码，我想要我的工具提示

 <li class="nav-item">
                    <a id="fblogin"  href="/auth/facebook">
                        <img src="./css/img/fblogin.png"  class="img-fluid">
                     </a>
                </li>

我也在使用bootstrap。

Answer 1

我终于通过使用tippy.js来解决这个问题这是代码：

$(function () {
$('.event').click(function (e) {
    e.preventDefault();

    $.ajax({
        url: '/eventname/selfie',
        type: 'GET',
        success: function () {
            console.log("logged in");
        },
        error: function () {
            var btn = document.querySelector('#fblogin');
            tippy(btn, {
                size: 'large',
                distance: 25
            })
            btn._tippy.show();

        }
    });
})

}）

当用户未登录时，在“登录按钮”上显示工具提示

1 个答案: