Javascript-使用按钮显示/隐藏图片

我想改善我的脚本，这样我就可以有更多的按钮，可以显示一个图像每个。（我需要49个按钮）。目前我只有两个工作正常的按钮。我应该如何写我的脚本下面，以便我可以做49个按钮

JavaScript

<script type="text/javascript" language="javascript">
    function showHide() {
        var ele = document.getElementById("showHideDiv");
        var ele1 = document.getElementById("showHideDiv1");
        ele1.style.display = "none";
        if(ele.style.display == "block") {
                ele.style.display = "none";             
          }
        else {
            ele.style.display = "block";            
        }
    }

function showHide1() {
    var ele = document.getElementById("showHideDiv");
    var ele1 = document.getElementById("showHideDiv1");
    ele.style.display = "none";
    if(ele1.style.display == "block") {
            ele1.style.display = "none";
      }
    else {
        ele1.style.display = "block";
    }
}
</script>

函数showHide（）{
var ele=document.getElementById（“showHideDiv”）；
var ele1=document.getElementById（“showHideDiv1”）；
ele1.style.display=“无”；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
}
否则{
ele.style.display=“块”；
}
}
函数showHide1（）{
var ele=document.getElementById（“showHideDiv”）；
var ele1=document.getElementById（“showHideDiv1”）；
ele.style.display=“无”；
如果（ele1.style.display==“块”）{
ele1.style.display=“无”；
}
否则{
ele1.style.display=“块”；
}
}

HTML

<button onclick="return showHide();">box1</button>
<button onclick="return showHide1();">box2</button>
<div id="showHideDiv" style="display:none;"><img  src="1.gif" height="280" width="120"/></div>
<div id="showHideDiv1" style="display:none;"><img  src="2.gif" height="280" width="120"/></div>

box1
框2

showHide（）可以接收带有div id的参数

function showHide(my_id) {
    var ele = document.getElementById("showHideDiv" + my_div);
    if(ele.style.display == "block") {
            ele.style.display = "none";             
    }
    else {
        ele.style.display = "block";            
    }
}

---

这段代码中缺少的是隐藏所有其他div。

好吧，这是另一种方法，使用jQuery（我知道，我知道，但我不能让它在纯javascript上工作）。我使用了以下标记：

<div id="template">
    <button class="toggleButton"></button>
    <div class="showHideDiv"><img src="" height="280" width="120"/></div>
</div>
<div id="main">
</div>

---

这是。console中有很多错误，因为那里没有真实的图像，但在实际应用程序中应该没有问题。

“此代码中缺少的是隐藏所有其他div。”-使用类而不是ID。每次只是隐藏这个类的所有div，只显示一个需要的div。我不太确定你的意思。你介意重写脚本并添加一个按钮+一张图片，这样我就能看到结果吗？@Ilyaluzinin我同意，这是一种可能的方法。或者，所有div都可以在父div中，然后脚本可以隐藏该div的所有子div（无需在每个div中放置类）。最好的方法取决于原始标记。您想动态添加它们，还是只在html中添加它们？

var main = $('#main');
// copy template to make 49 images.
var template = $('#template');
for (var i= 0; i < 49; i++) {
    var div = template.clone();
    var img = main.find('img');
    var button = div.find('button');
    img.attr('src', i + '.gif');
    button.text('box'+(i+1));   
    main.append(div.html());    
}
// add toggle event handler
$(document).on("click", ".toggleButton", function(e) {
    $('.showHideDiv').hide();
    $(e.target).next('.showHideDiv').show();
});