Advertisement
impressive_i

Замыкания на Javascript

Dec 27th, 2022
1,750
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // html - код
  2. <body>
  3.     <div class="items">
  4.         <div class="item">1</div>
  5.         <div class="item">2</div>
  6.         <div class="item">3</div>
  7.         <div class="item">4</div>
  8.         <div class="item">5</div>
  9.         <div class="item">6</div>
  10.         <div class="item">7</div>
  11.         <div class="item">8</div>
  12.     </div>
  13. </body>
  14. // CSS - код
  15. .items{
  16.     display: flex;
  17.     flex-wrap: wrap;
  18. }
  19.  
  20. .items .item{
  21.     background-color: #ddd;
  22.     width: 100px;
  23.     height: 100px;
  24.     margin: 10px;
  25.     padding: 10px;
  26.     border: 4px solid transparent;
  27.     transition: border-color 0.5s;
  28. }
  29.  
  30. .items .item-active{
  31.     border: 4px solid #0cf;
  32. }
  33.  
  34.  
  35. // Javascript - код
  36. makeCounter = function(){
  37.         var count = 1; 
  38.         return function(){
  39.             return (count++) % 10 ;
  40.         };
  41.     };
  42.  
  43.  
  44. var elemList = document.querySelectorAll('.items .item');
  45.  
  46.     for(var i = 0; i < elemList.length; i++){
  47.         elemList[i].onclick = setClass;
  48.         elemList[i].Counter = makeCounter();
  49.         elemList[i].num = elemList[i].innerHTML;
  50.     }
  51.  
  52.  
  53.   function setClass(){
  54.         this.classList.toggle("item-active");
  55.         this.innerHTML = this.num + ' Число нажатий на этот div: '  + this.Counter();
  56.     }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement