機能ブドウとリンゴを単一の機能にする手助けができますか？

私は同じ機能を果たしているので、関数grapeとappleを1つの関数にしたいと思います。機能ブドウとリンゴを単一の機能にする手助けができますか？

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

彼らはあなたが私を助けて.Can同じ機能を行うので、私は、1つの関数に関数のブドウとリンゴをしたいと思いますか？

出典

2016-08-17 Dream Hunter

私は、おそらくあなたは[codereview.se] – musefan

ただ、 '' onclickの= "マンゴー（）" 'に'のonclick = "フルーツ（ 'リンゴ'）" に変更に尋ねるべきだと思います'onclick =" grape（） "' 'onclick =" fruit（ '。orang'） 'に' fruit（selector） '関数を記述し、その引数をセレクタとして使います。 –

クラスを関数にパラメータとして渡します。

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

出典

2016-08-17 08:11:22 Phil

機能ブドウとリンゴを単一の機能にする手助けができますか？

答えて

関連する問題