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

回答

相關問題