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

这是demo。它在控制台中有很多错误，因为那里没有真实的图像，但在实际应用中应该没问题。

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

2 个答案: