javascript一个简单的幻灯片放映

时间:2014-03-18 00:21:36

标签: javascript

一个简单的幻灯片放映:Web文档,它在页面的大约中央显示一个水果图像。在图像下方,放置三个标有水果名称的按钮元素。 (其中一个必须是您选择显示的水果的名称。)按下按钮应将显示的图像更改为按钮上指定的水果图像。

这是我到目前为止所得到的

 <!DOCTYPE html >
   <html>
     <head>
       <style>
         img.displayed {
           display: block;
           margin-left: auto;
           margin-right: auto 
         }

         #bananas {
           display:none;
         }

         #apples {
           display:none;
         }

       </style>

       <script type="text/javascript">  

         function toggle_visibility(grapes) { 
           var e = document.getElementById(grapes); 
           if(e.style.display == 'block') e.style.display = 'none';
           else e.style.display = 'block'; 
         }

         function toggle_visibility(bananas) { 
           var e = document.getElementById(bananas); 
           if(e.style.display == "block") e.style.display = 'none';
           else e.style.display = 'block'; 
         }

         function toggle_visibility(apples) { 
           var e = document.getElementById(apples); 
           if(e.style.display == 'block') e.style.display = 'none';
           else e.style.display = 'block'; 
         }

    </script>

1 个答案:

答案 0 :(得分:0)

您的功能具有相同的签名,因为它们具有相同的名称。不是为不同的图像/元素定义3个函数,而是定义一个函数并将其重用于您传递给它的id名称。

如下所示:

function toggle_visibility(fruit) {
    var e = document.getElementById(fruit);

    if(e.style.display === 'block') {
        e.style.display = 'none';
    }
    else {
        e.style.display = 'block';
    } 
}

允许您执行以下操作:

toggle_visibility("banana"); // toggle the element with id 'banana'