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>

目前您点击一个人名，然后当您点击该框时，它会附加人员姓名和您在框中点击的时间。

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

我真的很担心我会怎么做这个，比如空白追加其他更新？处理这样的事情的最佳方法是什么？

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

正如您在小提琴中看到的那样，这显示了所有li个元素，即使它们没有被点击。如果需要，您可以通过将附加行附加到以下内容来删除未被删除的行：

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

Answer 2

 var cache = {},person,id;
   jQuery(document).on("click", "li", function (event) {
        id = jQuery(this).attr('id') || '';
        $(this).data('appended' , true);
        person = jQuery(this).text();
        cache[person] = true;
        $("#box").show();
    });

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

我希望上面的代码可以帮助你

Answer 3

尝试

$(function () {
    $("#box").click(function (e) {
        var d = new Date();
        var $div = $('#result .item[data-id="' + id + '"]');
        if ($div.length == 0) {
            $div = $('<div/>', {
                "class": 'item',
                "data-id": id
            }).appendTo('#result');
        }
        $div.html(person + ' last clicked the box at ' + d);
    });
});

演示：Fiddle

我可能使用class属性标记所点击的项目略有不同：http://jsfiddle.net/arunpjohny/CDCLF/2/

jquery如果空白追加其他更新

3 个答案: