лучший способ показать и скрыть элемент списка?

У меня есть два элемента списка, и я должен показать первый элемент, если какое-то условие выполнено, иначе я покажу второй.лучший способ показать и скрыть элемент списка?

, например

<li class="login" style="display:block"> 
    <a href="#" id="sign_up_link" data-modal="#create-account-modal" data- reveal-id="create-account-modal"></a> 
</li> 

<li class="login" style="display:none"> 
    <a class="btn" href="#" id="sign_up_link" data-modal="#create-account-modal" data-reveal-id="create-account-modal"></a> 
</li>

Я не могу изменить идентификатор элемента списка. У меня есть два варианта

Я могу добавить еще один класс в элемент списка, чтобы отличить, чтобы показать и который скрыть.
или я могу поместить каждый элемент списка в отдельный DIV с некоторым идентификатором и на основе на идентификатор, Див, я могу показать или скрыть.

, какая из них хорошо 1) или 2) ??

Есть ли лучший вариант?

источник

2015-10-07 ajayv

Вы должны определенно изменить класс в элементах списка, чтобы показать или скрыть их. почему у вас есть одинаковый идентификатор на тегах ''? –

У вас есть два якоря с одним и тем же атрибутом id. Даже скрывая/демонстрируя их, они не будут работать, как ожидалось. – Buzinas

У меня был только один элемент списка с привязным тегом с текстовой ссылкой, теперь мне нужно заменить ссылку на кнопку. Мне пришлось поместить тот же идентификатор, иначе другие тестовые примеры начнут сбой. – ajayv

$('#submit').click(function() { 
 
    $(this).prev('#hideme').toggle(); 
 

 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div> 
 
    <input type='button' id='hideme' value='hide me'> 
 
    <input type='button' id='submit' value='submit'> 
 
</div>

Описание: Показать или скрыть соответствующие элементы.

Документация here

Вы можете использовать .toggle(), чтобы скрыть/показать элемент, используя идентификатор в качестве селектора убедитесь, что вы используете уникальный идентификатор во все времена

$('#clickme').click(function() { 
 
    $(this).parent().find('#hideme').toggle(); 
 

 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id="hideme"> 
 
    <a href="#" id="">hide me</a> 
 
    </li> 
 

 
    <li id="clickme" > 
 
    <a class="btn" href="#" id="">click me</a> 
 
    </li> 
 
</ul>

Скрыть/show li вы должны иметь уникальный идентификатор, как всегда, и использовать правильный селектор, чтобы выбрать ли, который вы хотите показать или скрыть.

источник

2015-10-07 02:40:08 guradio

лучший способ показать и скрыть элемент списка?

ответ

Смежные вопросы