對多個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部分，因此可以在一頁上為多個img使用相同的功能。 每次打開的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總是一樣嗎？...您的功能應該像

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

接着

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

這將隱藏調用者對象，以便您可以關閉單擊的實際對象（而不是通過始終相同的ID查找的對象）。 另外，也許您想研究一下jQuery，因為如果您不想將事件直接綁定到您要隱藏的對象（但其中包含某些內容），它會大有幫助：

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

希望這可以幫助。

Answer 2

ID必須是唯一的。 將不同的類用於div。在此示例中，我將您的ID更改為class

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

通常，在單個頁面上具有多個具有相同ID的元素被認為是一個壞習慣。 如果您使用JavaScript通過id引用它們，則只需找到具有給定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 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>

也許可以幫到您。 您必須在元素上使用類。