javascript。クリックして配列要素を交換する

Question

私はこの項目のリストとそれらの4つを保持する配列をgitします。アイテムをクリックすると、配列にプッシュされますが、配列の長さは決して4より大きくても小さくてもなりません。だからLIのいずれかをクリックすると、そのアイテムを配列にプッシュしたいと思う。配列がいっぱいになると（長さが4のとき）、配列の最初の要素を、クリックされた次の項目にスワップアウトする必要があります。 uは（）、そしてポップ（）配列をアンシフトすることができます

 <ul> 
      <li>val 1</li> 
      <li>val 2</li> 
      <li>val 3</li> 
      <li>val 4</li> 
      <li>val 5</li> 
      <li>val 6</li> 
      <li>val 7</li> 
      <li>val 8</li> 
      <li>val 9</li> 
     </ul> 

Answer 1

var ar=[]; 
 
function clickFunc(e){ 
 
    if(ar.length<4){ 
 
    ar.push(e.innerHTML); 
 
    } 
 
    else{ 
 
    ar.unshift(e.innerHTML); 
 
    ar.pop(); 
 
    } 
 
console.log(ar) 
 
}

<ul> 
 
      <li onclick="clickFunc(this)">val 1</li> 
 
      <li onclick="clickFunc(this)">val 2</li> 
 
      <li onclick="clickFunc(this)">val 3</li> 
 
      <li onclick="clickFunc(this)">val 4</li> 
 
      <li onclick="clickFunc(this)">val 5</li> 
 
      <li onclick="clickFunc(this)">val 6</li> 
 
      <li onclick="clickFunc(this)">val 7</li> 
 
      <li onclick="clickFunc(this)">val 8</li> 
 
      <li onclick="clickFunc(this)">val 9</li> 
 
</ul>

：

私のマークアップは、これに似ています。