JQuery показать / скрыть два деления на клик и скрыть ссылку

Question

Я использую следующий JS

<a href=# onClick="if($(this).next('div').css('display') == 'none') { $(this).next('div').show('fast'); } else { $(this).next('div').hide('fast'); } return false;">Add a Street Address</a>

и следующий html

<div id=entry>
  <div id=label>Street</div>
  <div id=input><input name="" type="text" class="longtext" /></div></div>
<div id=entry>
  <div id=label>City/Town</div>
  <div id=input><input name="" type="text" class="longtext" /></div></div>

Как бы я изменил JS, чтобы показать / скрыть оба этих div'а одновременно, а затем заставить ссылку исчезнуть?

Answer 1

Сначала присвойте тэгу ссылки идентификатор, например, «ссылка», затем дайте вам два погружения с двумя разными идентификаторами, а затем напишите функцию js, например:

show_hide = function()
{
    if(document.getElementById('link').style.display == 'none'){
         document.getElementById('link').style.display = 'inline';
         document.getElementById('entry1').style.display = 'inline';
         document.getElementById('entry2').style.display = 'inline';
    }else{
         document.getElementById('link').style.display = 'none';
         document.getElementById('entry1').style.display = 'none';                  
         document.getElementById('entry2').style.display = 'none';
    }
}

Answer 2

а. лучше использовать класс вместо идентификатора, где оба имеют одинаковое значение (например, запись)

<div class=entry>
  <div id=label>Street</div>
  <div id=input><input name="" type="text" class="longtext" /></div></div>
<div class=entry>
  <div id=label>City/Town</div>
  <div id=input><input name="" type="text" class="longtext" /></div></div>

б. Скрытие обоих элементов можно сделать так:

$('.entry').hide();

скрытие нажатой ссылки

$(this).hide();
return true;

1010 *, например *

<a id='myLinkId' href='#'>Click To Hide</a>

$('a#myLinkId').click(function(){
    $('.entry').hide();
    $(this).hide();
    return true;
});

Answer 3

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

$(function() {
    $('#addressLink').click(function() {
        $('div.entry').toggle();
        $(this).hide();
        return false; // prevent the default anchor behaviour
    });    
});


<a id="addressLink" href="#">Add a Street Address</a>
<div class="entry">
  <div class="label">Street</div>
  <div class="input"><input name="" type="text" class="longtext" /></div>
</div>
<div class="entry">
  <div class="label">City/Town</div>
  <div class="input"><input name="" type="text" class="longtext" /></div>
</div>

Если вы хотите, чтобы элементы <div> были изначально скрыты, просто добавьте $('div.entry').hide(); в обработчик готовых документов. Есть и другие методы, которые вы можете использовать здесь, но я бы предложил скрыть использование JavaScript для постепенного ухудшения целей

Вот Рабочая демонстрация . Добавьте / edit к URL, чтобы увидеть код