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

首先给你的链接标签一个id，比如'link'，然后给你两个潜水两个不同的id，然后写一个像这样的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

一个。你最好使用class而不是id，它们共享相同的值（例如条目）

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

湾隐藏两个div可以完成：

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

隐藏点击的链接

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

e.g。

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

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

Answer 3

ID必须是唯一的，因此我已将ID更改为类。此外，我已将代码从内联更改为不显眼的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隐藏graceful degradation目的

这是 Working Demo 。将 / edit 添加到网址以查看代码

jquery在点击和隐藏链接上显示/隐藏两个div

3 个答案: