javascript - 使用 Javascript 存储用户在任何给定时间点击的最后三个 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

在查找函数内单击时向项目添加属性

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

然后使用 attr 选择器和 array#slice 你可以尝试

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 个被点击的项目。

或者，您可以在单击时添加一个虚拟类，并稍后选择该类。