Question

我正在创建一个锻炼记录器。添加工作正常，但我也想按时间顺序列出它们。

$('#logIt').click( function() {
    var date = new Date($('#workoutDate').val());
    var activity = $('#activity').val();

    $('.history').prepend('<li title="' + date + '">'
            + activity
        + '</li>');
    $('#logger')[0].reset();

    return false;

});

首先，我想我需要从现有的li中获取日期（我认为把它放在标题中最简单，因为我不想显示这些数据，但可以选择其他方式）来与新日期进行比较，但我甚至无法弄明白。我感谢任何指点我正确方向的人。

更新

.each是否适用于动态生成的内容？我的所有内容都是动态的，似乎只能将项目添加到列表的底部。我一直在修改和试验几个小时，但我不觉得我更接近解决方案。

$('#logIt').click( function() {
    var date = new Date($('#workoutDate').val());

    if($('.history').is(':empty')){
        $('.history').append('<li data-date="' + date + '">'
            + date
        + '</li>');
        return false;
    }

    $('.history li').each(function() {
        var logged_date = new Date($(this).attr('data-date'));

        if(date <= logged_date){
            var position = $(this).index()-1;
            $('.history li').eq(position).after('<li data-date="' + date + '">'
                + date
            + '</li>');
            return false;
        }
    });
    return false;

});

再次感谢您的帮助。

Answer 1

我建议使用data-属性。如，

$('.history').prepend('<li data-date="' + date + '">' + activity + '</li>');

有关详细信息，请参阅HTML data-* Attributes on W3C。

Answer 2

看一下我为你创建的JSfiddle：http://jsfiddle.net/3aC8V/1/ 它不完整，但它是关于如何动态修改列表和比较日期的想法。这是一个好的开始：

的Javascript

     $('#custom_date').click(function() {

        var custom_date =  $('#user_input').val();   
        //make sure the list is growing
        console.log($('.history li').children().length);

        $('.history li').each(function() {

        var logged_date = $(this).find('input').attr('title');
          if (new Date(custom_date) <= new Date(logged_date)) 
          {

              var position = $(this).index()-1;
              console.log(custom_date+'is
              less than'+logged_date+'position is:'+position);   

             $('.schedule ul li').eq(position).after('<li><input title="' + 
custom_date + '" value = "'+custom_date+'"></input></li>');
                return false;
          }


        });    

        });


        $('#current_date').click( function() {

        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!

        var yyyy = today.getFullYear();
        if(dd<10){dd='0'+dd;} if(mm<10){mm='0'+mm;} 
        today = mm+'/'+dd+'/'+yyyy;
        console.log(today);


            $('.history li').each(function() {

            var logged_date = $(this).find('input').attr('title');
             if (new Date(logged_date)> new Date(today)) {

            //get index of element
            var position = $(this).index()-1;

             $('.history li').eq(position).after('<li>
             <input title="' + today + '" value = "'+today+'">
              </input></li>');
                return false;
            }

            });



        });

Answer 3

这是我提出的解决方案。

$(document).ready( function() {     

    $("#workoutDate").datepicker();
    $("#workoutDate").datepicker('setDate', new Date());
    $("#workoutDate-btn").click( function(){
        if ( $("#workoutDate").datepicker("widget").is(":visible") ) {
            $("#workoutDate").datepicker("hide");
        } else {
            $("#workoutDate").datepicker("show");
        }
    });

    // this adds an item to a user's history
    $('#logIt').click( function() {
        var date = new Date($('#workoutDate').val());

        $('.history').append('<li data-date="' + date + '">'
            + date
        + '</li>');

        sortDates();
        return false;
    });

});

function sortDates() {
    var $dateArray = $('.history li');

    $dateArray.sort(function(a,b){
        var a = new Date( $(a).text() );
        var b = new Date( $(b).text() );

        if ( a < b ){
            return -1;
        }
        if ( a > b ){
            return 1;
        }
        return 0;
    });

    $('.history').html($dateArray);
    $dateArray.sort(function(a,b){
        return new Date( $(a).text() ) < new Date( $(b).text() );
    });

    $('.history').html($dateArray);
}

感谢大家的帮助！

按时间顺序添加项目

3 个答案:

的Javascript