Javascript-使用按鈕顯示/隱藏圖片

Question

我想改善自己的腳本，以便可以有更多按鈕，每個按鈕可以顯示一張圖像。 （我需要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>

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

Answer 1

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。

Answer 2

好吧，這是使用jQuery的另一種方法（我知道，我知道，但是我無法使其在純JavaScript上運行）。 我使用了以下標記：

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

Div template用作其他div的模板。 這是JavaScript代碼：

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();
});

這是演示 。 它在控制台中有很多錯誤，因為那里沒有真實的圖像，但是在實際的應用程序中應該沒問題。