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>

To（删除类名中的点）：

<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

Answer 2

@ nem＆＃39; 答案是正确的。但如果您已在类名中有一个点，则可以像这样转义点： -

＆＃13;

$('.\\.logged_in').show()

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class=".logged_in" style="display:none">Hello</div>

＆＃13;

Answer 3

即使元素具有class=".logged_in"，您仍然可以使用以下With选择器表达式将元素定位到显示/隐藏：

$('[class=".logged_in"]').hide();
$('[class=".logged_out"]').show();

显示和隐藏列表项

3 个答案: