存储用户在任何给定时间使用 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选择器和数组#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 个单击的项目。

或者，您可以在单击时添加虚拟类，并在以后使用该类进行选择。

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>