2016-08-17 59 views
0

我想將葡萄和蘋果的功能合併爲一個功能,因爲它們具有相同的功能。您能幫我嗎?你能幫我把功能葡萄和蘋果變成一個功能嗎?

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="mango.css"> 
     <script> 
      function mango(){ 
      document.querySelectorAll(".apple") 
       .forEach(function(node){ 
        node.style.display="block"; 
       }) 
      } 
      function grape(){ 
      document.querySelectorAll(".orang") 
       .forEach(function(node){ 
        node.style.display="block"; 
       }) 

     } 
     </script> 
    </head> 
    <body> 
    </body> 
    <ul id="main" onclick="mango()">main1 
     <a href="#"><li Class="apple">sub1</li></a> 
     <a href="#"><li Class="apple">sub2</li></a> 
     <a href="#"><li Class="apple">sub3</li></a> 
    </ul> 
    <ul id="main" onclick="grape()">main2 
     <a href="#"><li class="orang">sub21</li></a> 
     <a href="#"><li class="orang">sub22</li></a> 
     <a href="#"><li class="orang">sub23</li></a> 
    </ul> 
</html> 

相關的CSS:

#main li{ 
    list-style-type: none; 
    display: none; 
} 
#main{ 
    cursor: pointer; 
} 

我想提出的功能葡萄和蘋果爲一個單一的功能,因爲他們做相同的功能。可你能幫我嗎?

+0

我想也許你應該問在[codereview.se] – musefan

+3

只要改變'的onclick = 「芒果()」''到的onclick = 「水果( '蘋果')」'和'onclick =「grape()」'到'onclick =「fruit('。orang')',編寫'fruit(selector)'函數並使用參數作爲選擇器。 –

回答

2

給你的課程作爲參數的功能。

#main li{ 
 
    list-style-type: none; 
 
    display: none; 
 
} 
 
#main{ 
 
    cursor: pointer; 
 
}
<html> 
 
    <head> 
 
     <link rel="stylesheet" type="text/css" href="mango.css"> 
 
     <script> 
 
      function mangoGrape(selector){ 
 
      document.querySelectorAll(selector) 
 
       .forEach(function(node){ 
 
        node.style.display="block"; 
 
       }) 
 
      } 
 
     </script> 
 
    </head> 
 
    <body> 
 
    </body> 
 
    <ul id="main" onclick="mangoGrape('.apple')">main1 
 
     <a href="#"><li class="apple">sub1</li></a> 
 
     <a href="#"><li class="apple">sub2</li></a> 
 
     <a href="#"><li class="apple">sub3</li></a> 
 
    </ul> 
 
    <ul id="main" onclick="mangoGrape('.orang')">main2 
 
     <a href="#"><li class="orang">sub21</li></a> 
 
     <a href="#"><li class="orang">sub22</li></a> 
 
     <a href="#"><li class="orang">sub23</li></a> 
 
    </ul> 
 
</html>