Javascript 点击多ID显示/隐藏

Question

我正在使用这个脚本：我想 show/hide 单击文本，使用单个 ID 效果很好（添加淡入淡出动画会很棒）但我无法添加另一个 ID ..有人可以帮助我吗？！

谢谢

function showHide(shID) {
   if (document.getElementById(shID)) {
      if (document.getElementById(shID+'-show').style.display != 'none') {
         document.getElementById(shID+'-show').style.display = 'none';
         document.getElementById(shID).style.display = 'block';
      }
      else {
         document.getElementById(shID+'-show').style.display = 'inline';
         document.getElementById(shID).style.display = 'none';
      }
   }
}

/**/

#wrap {
      float:left;
   width:100%;
   margin-top:20px;
      max-width: 320px;
      padding: 5px;
      background-color: #f2f2f2; }
#wrap p{
 border-bottom:none;
 border-top:none; }
   
#wrap img{margin: 0 auto; margin-bottom:15px;}
   h1 {
      font-size: 200%; }

   /* This CSS is used for the Show/Hide functionality. */
   .more {
      display: none;
     }
   a.showLink, a.hideLink {
      text-decoration: none;
   background:#fff;
      color:#333;
      padding: 10px;
   -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
       }


   a.hideLink {}
   a.showLink:hover, a.hideLink:hover {
    color:#E99473;
       }

 <div id="wrap">
     
      <p> 
        <img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/> 
      
        <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">+ INFORMAZIONI</a>
      </p>
      <div id="example" class="more">
         <p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
         <p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p>
      </div>
   </div>
   
   <div id="wrap">
     
      <p> 
        <img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/> 
      
        <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">+ INFORMAZIONI</a>
      </p>
      <div id="example" class="more">
         <p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
         <p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p>
      </div>
   </div>
   
   <div id="wrap">
     
      <p> 
        <img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/> 
      
        <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">+ INFORMAZIONI</a>
      </p>
      <div id="example" class="more">
         <p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
         <p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p>
      </div>
   </div>

Answer 1

id 值永远不应该相同。维护唯一的 id 值。那么

如果您想要 show/hide 具有唯一 ID 值和相应 function:showHide('uniqueIdVal') 的特定元素，您现有的脚本应该可以工作。
如果您尝试 hide/show 一次单击所有元素，那么您可以 select 通过维护虚拟 class - XYZ 所有这些元素对于元素并通过 document.getElementsByClassName("XYZ");

Answer 2

根据 HTML 规范，元素的 id 属性必须是唯一的。您要么需要为每个元素分配不同的 ID，要么通过一些限制较少的参数来定位它们，例如 class.

<div id="wrap">

  <p> 
    <img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/> 

    <a href="#" id="example1-show" class="showLink" onclick="showHide('example1');return false;">+ INFORMAZIONI</a>
  </p>
  <div id="example1" class="more">
    <p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
    <p><a href="#" id="example1-hide" class="hideLink" onclick="showHide('example1');return false;">Hide this content.</a></p>
  </div>
</div>

<div id="wrap">

  <p> 
    <img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/> 

    <a href="#" id="example2-show" class="showLink" onclick="showHide('example2');return false;">+ INFORMAZIONI</a>
  </p>
  <div id="example2" class="more">
    <p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
    <p><a href="#" id="example2-hide" class="hideLink" onclick="showHide('example2');return false;">Hide this content.</a></p>
  </div>
</div>

<div id="wrap">

  <p> 
    <img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt=""/> 

    <a href="#" id="example3-show" class="showLink" onclick="showHide('example3');return false;">+ INFORMAZIONI</a>
  </p>
  <div id="example3" class="more">
    <p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
    <p><a href="#" id="example3-hide" class="hideLink" onclick="showHide('example3');return false;">Hide this content.</a></p>
  </div>
</div>

但是，您最好还是使用 jQuery。有了它，您可以进行各种选择器和操作（包括淡入淡出效果），并拥有更可靠、更简洁的代码。

这是您在没有任何 ID 的情况下重写的代码：

jQuery(function() {
  jQuery('.showLink,.hideLink').click(function() {
    jQuery(this).closest('.wrap').find('.more').fadeToggle(500);
  });
});

/**/

.wrap {
  float: left;
  width: 100%;
  margin-top: 20px;
  max-width: 320px;
  padding: 5px;
  background-color: #f2f2f2;
}

.wrap p {
  border-bottom: none;
  border-top: none;
}

.wrap img {
  margin: 0 auto;
  margin-bottom: 15px;
}

h1 {
  font-size: 200%;
}
/* This CSS is used for the Show/Hide functionality. */

.more {
  display: none;
}

a.showLink,
a.hideLink {
  text-decoration: none;
  background: #fff;
  color: #333;
  padding: 10px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

a.hideLink {}

a.showLink:hover,
a.hideLink:hover {
  color: #E99473;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <p>
    <img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt="" />
    <a href="#" class="showLink">+ INFORMAZIONI</a>
  </p>
  <div class="more">
    <p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
    <p><a href="#" class="hideLink">Hide this content.</a></p>
  </div>
</div>

<div class="wrap">
  <p>
    <img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt="" />
    <a href="#" class="showLink">+ INFORMAZIONI</a>
  </p>
  <div class="more">
    <p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
    <p><a href="#" class="hideLink">Hide this content.</a></p>
  </div>
</div>

<div class="wrap">
  <p>
    <img src="http://riccardobernucci.com/riviera/images/thumbs/FFBB.jpg" alt="" />
    <a href="#" class="showLink">+ INFORMAZIONI</a>
  </p>
  <div class="more">
    <p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
    <p><a href="#" class="hideLink">Hide this content.</a></p>
  </div>
</div>

Javascript 点击多ID显示/隐藏

Javascript show / hide on click multi ID

javascript

text

show-hide