jquery如果空白追加否则更新答案

【问题标题】：jquery if blank append else updatejquery如果空白追加否则更新
【发布时间】：2013-10-03 13:32:02
【问题描述】：

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

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

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

我真的不知道该怎么做，比如 if blank append else update？处理此类事情的最佳方法是什么？

【问题讨论】：

标签： javascript jquery html append

【解决方案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);
    });
});

演示：Fiddle

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

【讨论】：

【解决方案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);
    });
});

Example fiddle

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

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

【讨论】：

这太棒了，我喜欢您添加的方式，因为您只能单击此人一次，并且需要再次单击他们才能注册更新。有了这个功能，它是如何工作的？我不太明白单击框后如何重置值？
这些值被重置，因为在点击#box 时，它会遍历所有可用的li 元素并获取它们的值。因此，它每次都在重建所有信息。
没问题，很高兴为您提供帮助

【解决方案3】：

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

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

【讨论】：