2

このフィドルにも含まれている以下のコードがあります。

<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

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 に答える