Question

好吧，我想编辑这段代码，所以如果我按下按钮1它首先显示一个图像，然后如果我再次按下按钮1它应该隐藏图像。所有按钮都一样。我想知道是否有人可以重写我的脚本以便成为可能。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='/js/lib/dummy.js'></script>




  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    .hidden {
    display: none;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
window.show = function(elementId) { 
    var elements = document.getElementsByTagName("div");
    for (var i = 0; i < elements.length; i++)
        elements[i].className = "hidden";

    document.getElementById(elementId).className = "";
}
}//]]>  

</script>


</head>
<body>
<button type="button" onclick="show('id1');" >Button 1</button>
<button type="button" onclick="show('id2');" >Button 2</button>
<button type="button" onclick="show('id3');">Button 3</button>

<button type="button" onclick="show('id4');">Button 4</button>

<div id="id1" class="hidden"><img  src="alfagel.gif" height="280" width="120"/></div>
<div id="id2" class="hidden"><img  src="alfagel.gif" height="280" width="120"/></div>
<div id="id3" class="hidden"><img  src="bjorktrast.gif" height="280" width="120"/></div>
<div id="id4" class="hidden">text 4</div>

</body>


</html>

Answer 1

Import jQuery

Use $.fn.toggleClass

$('div').toggleClass('hidden');

完整示例：http://jsfiddle.net/sLLL7/

Answer 2

jQuery有一个应该有效的隐藏和显示方法。例如：

$('id1').hide()

Answer 3

最快的方法是使用jQuery并查看它的toggle（）函数。否则......可能会将按钮的状态存储为boo leans并根据值有条件地隐藏/显示。

使用div显示和隐藏图像

3 个答案: