Отображение и скрытие списка элементы

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, поскольку не является одним).

Ваша проблема в том, что у вас есть точки в именах классов. Следовательно, ваш селектор 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

Answer 2

@ нэм-х ответ правильный. но если вы ИМЕЮТ иметь точку в имени класса, вы можете избежать точку следующим образом: -

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

<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>

Answer 3

Даже если элемент имеет class=".logged_in", вы все равно можете ориентировать элемент чтобы показать/скрыть, используя следующее выражение With селектора:

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