使用隱藏/顯示功能的多個img，但總是相同的img顯示

Question

所以，我把這個網站作爲學校的任務，我把以下功能放在裏面。

function show() { 
    if(document.getElementById('benefits').style.display=='none') { 
     document.getElementById('benefits').style.display='block'; 
    } 
    return false; 
} 
function hide() { 
    if(document.getElementById('benefits').style.display=='block') { 
     document.getElementById('benefits').style.display='none'; 
    } 
    return false; 
} 

有了這個HTML代碼與它去

<div id="benefits" style="display:none;"><img src="img/Bigleopard.png"id="leopard2"> 
     <div id="upbutton"><a id="closeit" onclick="return hide();" >Return home</a></div> 
</div> 

我使用的HTML部分幾次了，所以我可以使用多種IMGS相同功能的一個頁面上。每次打開img都會有所不同，但是一旦點擊它，它就會讓我顯示相同的img。所以當我點擊另一個不同的img div時，第一個div會顯示相同的img。

現在，我使用了div不同的ID和我使用這樣的JavaScript（JavaScript有用於這項任務）

function show() { 
    if(document.getElementById('benefits').style.display=='none') { 
     document.getElementById('benefits').style.display='block'; 
    } 
    return false; 
} 
function hide() { 
    if(document.getElementById('benefits').style.display=='block') { 
     document.getElementById('benefits').style.display='none'; 
    } 
    return false; 
} 

function show() { 
    if(document.getElementById('polarbears').style.display=='none') { 
     document.getElementById('polarbears').style.display='block'; 
    } 
    return false; 
} 
function hide() { 
    if(document.getElementById('polarbears').style.display=='block') { 
     document.getElementById('polarbears').style.display='none'; 
    } 
    return false; 
} 

這些

編輯***是兩個div：

<div id="benefits" style="display:none;"><img src="img/Bigleopard.png" id="leopard2"> 
     <div id="upbutton"><a id="closeit" onclick="return hide();" >Return home</a></div> 
</div> 

<div id="polarbears" style="display:none;"><img src="img/Bigpolarbear.png" id="polarbear2"> 
     <div id="upbutton"><a id="closeit" onclick="return hide();" >Return home</a></div> 
</div> 

完成此操作後，我現在將獲得Bigpolarbear.png img以便始終顯示。首先是始終出現的豹img。

我似乎無法找到它

Answer 1

通常認爲在單個頁面上具有相同ID的多個元素是不合適的。如果你通過id引用JavaScript給他們，它只需找到具有給定id的第一個元素並對其執行操作。你應該爲不同的div元素使用不同的id，然後它會起作用。或者 - 要顯示和隱藏方法，您可以將句柄傳遞給單擊的元素，並且您可以訪問要顯示或隱藏的元素。你正在開發的整個事情可以很容易地用jQuery這樣做：

function show(element){ 
    element.parent().parent().show(); 
} 
function hide(element){ 
    element.parent().parent().show(); 
} 

<div id="benefits" style="display:none;"><img src="img/Bigleopard.png"id="leopard2"> 
    <div id="upbutton"><a id="closeit" onclick="hide(this);" >Return home</a></div> 
</div> 

Answer 2

是您的ID總是一樣的？...你的功能應該像

<div .... onclick="hide(this)"> 

然後

function hide(o) {o.style.display="none";} 

這將給隱藏調用者對象，因此您可以關閉您點擊的實際內容（而不是通過始終相同的ID查找內容）。另外，也許你想尋找到jQuery的，因爲它有很大幫助，如果你不希望將事件綁定權你隱藏的對象（但東西它裏面）：

function hideMyContainer(o) { $(o).closest(".some-container-class").hide(); } 

希望這有助於。

Answer 3

ID必須是唯一的。用來傳送類div.In這個例子，我有你的ID更改爲類

<div class="benefits" style="display:none;"> 
    <img src="img/Bigleopard.png"id="leopard2"> 
    <div class="upbutton"><a class="closeit" >Return home</a></div> 
</div> 

<div class="benefits" style="display:none;"> 
    <img src="img/Bigleopard.png"id="leopard2"> 
    <div class="upbutton"><a class="closeit" >Return home</a></div> 
</div> 

jQuery庫

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

使用jQuery

<script> 
$(document).ready(function(){ 

    $(".closeit").click(function(e) 
    { 
    $(this).parent().parent().hide(); 
    } 
    }); 
}); 

</script> 

Answer 4

爲什麼你不使用jQuery的功能切換元素？ http://jsfiddle.net/skxe2/1/

<div id="benefits"> 
    <img src="img/Bigleopard.png" id="leopard2" /> 
    <a class="closeit" href="javascript:;">Return home</a> 
    <img src="img/Bigleopard.png" id="leopard2" /> 
    <a class="closeit" href="javascript:;">Return home</a> 
    <img src="img/Bigleopard.png" id="leopard2" /> 
    <a class="closeit" href="javascript:;">Return home</a> 
    <img src="img/Bigleopard.png" id="leopard2" /> 
    <a class="closeit" href="javascript:;">Return home</a> 
</div> 


<script type="text/javascript"> 
$(".closeit").on("click", function() { 
    $(this).prev("img").toggle(); 
}); 
</script> 

也許它可以幫助你。你必須在你的元素上使用類。