Javascript显示/隐藏点击多ID

我使用这个脚本：我想显示/隐藏文本点击，用一个单一的ID它很好（添加淡出动画会很好），但我不能添加另一个ID ..有人可以帮助我？！Javascript显示/隐藏点击多ID

THANKS

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; 
 
\t width:100%; 
 
\t margin-top:20px; 
 
     max-width: 320px; 
 
     padding: 5px; 
 
     background-color: #f2f2f2; } 
 
#wrap p{ 
 
\t border-bottom:none; 
 
\t border-top:none; } 
 
\t 
 
#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; 
 
\t background:#fff; 
 
     color:#333; 
 
     padding: 10px; 
 
\t -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 { 
 
\t 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>

来源

2015-06-11 New-Raquem

ID是唯一的，你不能使用 – adeneo

谢谢你，如果有人能告诉我怎么多个元素相同的ID我能解决它吗？！谢谢 –

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

来源

2015-06-11 13:37:27 martynasma

非常感谢你！ martynasma –

ID值不应该是相同的。保持唯一的ID值。然后

如果你想显示/隐藏特定元素，具有独特的ID值和相应的功能：显示隐藏（“uniqueIdVal”）现有的脚本应该工作。
如果您试图通过一次单击来隐藏/显示所有元素，则可以通过维护一个虚拟类来选择所有这些元素 - 元素的XYZ和通过document.getElementsByClassName（“XYZ” ）;

来源

2015-06-11 13:25:47

Javascript显示/隐藏点击多ID

回答

相关问题