Question

我正在使用这个脚本：我希望在点击时显示/隐藏文字，只需一个ID它就可以很好地添加（添加淡入淡出的动画会很棒）但是我无法添加其他ID ...有人可以帮助我吗？！

感谢

＆＃13;

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';
      }
   }
}

＆＃13;

/**/

#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;
       }

＆＃13;

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

＆＃13;

Answer 1

id值永远不应该相同。保持唯一的id值。然后

如果您想显示/隐藏具有唯一ID值和相应功能的特定元素：showHide（＆＃39; uniqueIdVal＆＃39;）您现有的脚本应该有效。
如果您试图通过单击隐藏/显示所有元素，那么您可以通过维护虚拟类来选择所有这些元素 - 元素的XYZ并按document.getElementsByClassName（＆＃）查找元素34; XYZ＆＃34）;

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>

单击多ID时显示/隐藏Javascript

2 个答案: