JavaScriptを使用していつでもユーザーがクリックした最後の3つのliタグのデータ値（カスタム属性）を保存する

Question

私はHTMLページに複数の質問を回答しています。 例 以下のように：

<ul class="no-styles que-list que-checkbox" data-max-count="3" data-que> 
 
      <li class="question" data-val="2" onclick="find(this);">Lorem ipsum dolor, consectetured do eiusmod</li> 
 
      <li class="question" data-val="1" onclick="find(this);">quis nostrud exercitatio</li> 
 
      <li class="question" data-val="2" onclick="find(this);">onsectetur, adipisci velit, sed quia non nu</li> 
 
      <li class="question" data-val="5" onclick="find(this);">dolorem ipsum Ut enim</li> 
 
      <li class="question" data-val="0" onclick="find(this);">di consequatur? Quis autem vel eum</li> 
 

 
</ul>

私はJavascriptを使用して、任意の時点で、ユーザーがクリックした最後の三つのliタグ のデータ値（カスタム属性）を格納したいと思います。

これを達成する方法を教えてください。

ありがとうございます。

Answer 1

find関数内でクリックしたときに

$("ul li").click(function(){ 
    $(this).attr("clicked","true"); 
}) 

アイテムに属性を追加し、attrのセレクターと配列＃スライスで、あなたがするのを忘れないでください

var vals=[]; 
 

 
$("ul li[clicked='true']").slice(-3).each(function(){ 
 
    vals.push($(this).attr("data-val")) 
 
}) 
 
console.log(vals);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="no-styles que-list que-checkbox" data-max-count="3" data-que> 
 
      <li class="question" data-val="2" onclick="find(this);">Lorem ipsum dolor, consectetured do eiusmod</li> 
 
      <li class="question" data-val="1" onclick="find(this);">quis nostrud exercitatio</li> 
 
      <li class="question" data-val="2" onclick="find(this);">onsectetur, adipisci velit, sed quia non nu</li> 
 
      <li class="question" data-val="5" onclick="find(this);">dolorem ipsum Ut enim</li> 
 
      <li class="question" data-val="0" onclick="find(this);">di consequatur? Quis autem vel eum</li> 
 

 
</ul>

を試すことができます実行する前に少なくとも3つのクリックされた項目があることを確認してください。

また、クリック時にダミークラスを追加し、後でそのクラスで選択することもできます。李値を格納する際

Answer 2

はコード

var listItem = $(".question"); 
 
total = listItem.length; 
 
for (var i = 0; i < total; i++) { 
 
    if (i >= 2) { 
 
    console.log($('ul li').eq(i).text()); //store last three li here where you want 
 
    } 
 
} 
 

 
//or 
 

 
$('ul li').click(function() { 
 
    var index = $(this).index(); 
 
    if (index >= 2) { 
 
    console.log($('ul li').eq(index).text()); //store last three li here where you want 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="no-styles que-list que-checkbox" data-max-count="3" data-que> 
 
    <li class="question" data-val="2" onclick="find(this);">Lorem ipsum dolor, consectetured do eiusmod</li> 
 
    <li class="question" data-val="1" onclick="find(this);">quis nostrud exercitatio</li> 
 
    <li class="question" data-val="2" onclick="find(this);">onsectetur, adipisci velit, sed quia non nu</li> 
 
    <li class="question" data-val="5" onclick="find(this);">dolorem ipsum Ut enim</li> 
 
    <li class="question" data-val="0" onclick="find(this);">di consequatur? Quis autem vel eum</li> 
 

 
</ul>