2

我有下面的代码，它也包含在这个 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>

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

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

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

4

3 回答 3

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>");
            }
        });
    });

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

于 2013-09-27T09:54:17.700 回答
2

您可以将上次点击日期作为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);
    });
});

示例小提琴

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

clickDate && $box.append($div);
于 2013-09-27T09:52:43.137 回答
1

尝试

$(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);
    });
});

演示：小提琴

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

于 2013-09-27T09:49:11.727 回答