Question

下面的脚本实时生成标记，并使用setInterval自动更新。标记由button和div中的隐藏内容组成。特定按钮取消隐藏其对应的div。然而，在每个间隔时，div重新隐藏。我试图在每个间隔后点击后显示这样的特定div。有没有办法让DOM记住在间隔刷新之前显示哪个div？我试图通过前端JavaScript实现这一目标，请不要使用服务器端解决方案。提前谢谢！

setInterval(itemMenu,1500);

function itemMenu() {

    $.ajax({
        type: "GET",
        url: "Administration/data/people.xml"
    }).done(function (xml) {

        $("#loadMe").empty();
        $("#toadMe").empty();

        $(xml).find('fullName').each(function(index) {

            ////////////////////////////
            // generate loadMe markup //
            var i = index + 1;
            var fullName = $(this).text();

            $('<button type="button" class="mybutton" name="users" onclick="itemContent(this.value)"></button>').attr('value', i).html(fullName).appendTo('#loadMe');

            ////////////////////////////
            // generate toadMe markup //
            var firstName = $(this).siblings('firstName');
            var lastName = $(this).siblings('lastName');
            var age = $(this).siblings('age');
            var hometown = $(this).siblings('hometown');
            var job = $(this).siblings('job');

            $('<div></div>').attr('id', i).appendTo('#toadMe');
            $('<h1></h1>').html(firstName).appendTo('#' + i);
            $('<h1></h1>').html(lastName).appendTo('#' + i);
            $('<h1></h1>').html(age).appendTo('#' + i);
            $('<h1></h1>').html(hometown).appendTo('#' + i);
            $('<h1></h1>').html(job).appendTo('#' + i);

            $('#'+i).hide();

        });
    }).fail(function (response, error) {
        $('#info').text('Error!');
    });

};

function itemContent(k) {
    $("#"+k).show();
};

Answer 1

您是否考虑过仅在单击按钮时生成<div>，因此在轮询XML时您不会经常覆盖这些元素？像这样：

setInterval(refreshXml, 1500);

function refreshXml() {
  var req = $.get('Administration/data/people.xml');

  req.done(function(xml) {
    // Update the global XML variable used to create buttons.
    window.peopleXml = xml;

    // Clear existing buttons.
    $('#loadMe').empty();

    // Display a button for each XML person entity.
    $(xml).find('fullName').each(function(index) {
        var fullName = $(this).text();

        $('<button>', {
          'class': 'mybutton',
          value: $(this).siblings('id').text(),
          text: fullName
        }).appendTo('#loadMe');          
    });

    // Update any person divs that were already visible.
    $('#toadMe .person').each(function() {
      // Grabs the ID from data-person-id set earlier.
      var id = $(this).data('person-id');

      show_person(id);
    });
  });
}

function show_person(id) {
  $('#person-detail-' + id).remove();

  get_person(id).appendTo('#toadMe');
}

function get_person(id) {
  var $person = $(window.peopleXml).find('id:contains(' + id + ')').parent();

  var $div = $('<div>', {
    'class': 'person',
    'data-person-id': id,
    id: 'person-detail-' + id
  });

  $('<h1>', { text: $person.find('firstName').text() }).appendTo($div);
  $('<h1>', { text: $person.find('lastName').text() }).appendTo($div);
  $('<h1>', { text: $person.find('age').text() }).appendTo($div);
  $('<h1>', { text: $person.find('hometown').text() }).appendTo($div);
  $('<h1>', { text: $person.find('job').text() }).appendTo($div);

  return $div;  
}

$(document).on('click', '.mybutton', function() {
  show_person(this.value);
});

随着XML文件的增长，即使最初看起来有点复杂，这种方法也是值得的。每1.5秒为每个可能的<div>预生成person的开销将开始显着落后于浏览器，因为XML文档变得真实世界。

保持jQuery在setInterval AJAX之间生成标记

1 个答案: