javascript - jquery 如果空白追加否则更新

Question

我有下面的代码，它也包含在 this fiddle 中.

<div id="box"><div>click in the box</div></div>
<p>Click a name</p>
<ul>
    <li id="id-1">tom</li>
    <li id="id-2">jerry</li>
</ul>
<div id="result"></div>


<script>
        var id;
    var person;
    jQuery(document).on("click", "li", function (event) {
        id = jQuery(this).attr('id') || '';
        person = jQuery(this).text();
        $("#box").show();
    });

    $(function () {
        $("#box").click(function (e) {
            var d = new Date();
            $( "#result" ).append( "<div class='item'>" + person + " last clicked the box at " + d + "</div>");
        });
    });

</script>

当前您单击一个人的姓名，然后当您单击该框时，它会 append 该人的姓名和您单击该框的时间。

我不想让这种情况反复发生，如果他们之前没有被点击过，我想追加这个人，如果他们有，我想用他们最后一次点击该框的时间更新最新的项目。

我真的很困惑我将如何去做这件事，比如如果空白追加其他更新？处理此类问题的最佳方法是什么？

Answer 1

您可以将上次点击日期存储为项目本身的 data 参数。然后你可以很容易地判断它是否被点击过。试试这个:

$(document).on("click", "li", function (event) {
    $(this).data('clickdate', new Date());
    $("#box").show();
});

$("#box").click(function (e) {
    var $box = $(this).empty();
    $('li').each(function(i, el) {
        var clickDate = $li.data('clickdate');
        var $item = $('<p />', {
            text: $(el).text() + ' : ' + (clickDate || 'Not clicked')
        });
        $box.append($item);
    });
});

Example fiddle

正如您在 fiddle 中所见，这显示了所有 li 元素，即使它们尚未被单击。如果需要，您可以通过将 append 行 append 到以下位置来删除未单击的:

clickDate && $box.append($div);