javascript - 显示和隐藏列表项

Question

我有以下菜单:

<li style="display:none" class=".logged_in">Menu 1</li>
<li style="display:none" class=".logged_in">Menu 2</li>
<li style="display:show" class=".logged_out">Menu 3</li>

我使用 Ajax 调用端点来测试用户是否登录。如果已登录，我想隐藏菜单 1 和 2，并显示菜单 3，如果没有，则相反。

我一直在尝试隐藏和显示这样的项目:

$.find('.logged_out').css("display", "show");
$.find('.logged_in').css("display", "none");

但这似乎行不通。

我还尝试了一些变体，例如:

$(".logged_out").show();
$(".logged_in").show();

知道正确的方法吗？

Answer 1

其中任何一个都会隐藏您的元素(除非您应该为 display 属性使用有效值，因为 show 不是一个)。

你的问题是类名本身有点。因此，您的 jquery 选择器正在寻找具有 logged_in 和 logged_out 类的元素，但找不到它们，因为您的类被称为 .logged_in 和 .logged_out.

改变:

<li style="display:none" class=".logged_in">Menu 1</li>
<li style="display:none" class=".logged_in">Menu 2</li>
<li style="display:show" class=".logged_out">Menu 3</li>

到(删除类名中的点):

<li style="display:none" class="logged_in">Menu 1</li>
<li style="display:none" class="logged_in">Menu 2</li>
<li style="display:show" class="logged_out">Menu 3</li>

如果您想使用点，请查看 @BG101's answer