对多个图像使用隐藏/显示功能，但始终显示相同的图像

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 的元素被认为是一种不好的做法。如果您使用 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 2

你的 ID 总是一样的吗？...你的功能应该像这样工作

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

然后

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

这将给 hide 调用者对象，以便您可以关闭您正在单击的实际内容（而不是通过始终相同的 ID 查找的内容）。另外，也许您想研究一下 jQuery，因为如果您不想将事件直接绑定到您正在隐藏的对象（但在其中的某些东西），它会很有帮助：

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

希望这会有所帮助。

Answer 3

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

也许它可以帮助你。您必须在元素上使用类。