Javascript 在setInterval和AJAX之间保留jQuery生成的标记

下面的脚本使用

setInterval

实时生成标记并自动更新。标记由

按钮

s和

div

s中的隐藏内容组成。特定按钮取消隐藏其相应的

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

setInterval（项目菜单，1500）；
函数项菜单（）{
$.ajax({
键入：“获取”，
url:“Administration/data/people.xml”
}).done（函数（xml）{
$（“#loadMe”）.empty（）；
$（“#toadMe”）.empty（）；
$（xml）.find（'fullName'）.each（函数（索引）{
////////////////////////////
//生成loadMe标记//
var i=指数+1；
var fullName=$（this.text（）；
$（''）.attr（'value'，i）.html（全名）.appendTo（'#loadMe'）；
////////////////////////////
//生成toadMe标记//
var firstName=$（this.sibbines（'firstName'）；
var lastName=$（this.sibbines（'lastName'）；
var age=$（this.sibbines（'age'）；
var homely=$（this.sillides（'homely'）；
var job=$（this.sibbines（'job'）；
$（''）.attr（'id'，i.）.appendTo（'toadMe'）；
$（''）.html（firstName）.appendTo（'#'+i）；
$（''）.html（lastName）.appendTo（'#'+i）；
$（''）.html（age）.appendTo（'#'+i）；
$（''）.html（家乡）.appendTo（'#'+i）；
$（''）.html（作业）.appendTo（'#'+i）；
$（'#'+i）.hide（）；
});
}).失败（功能（响应、错误）{
$（'info'）.text（'Error！'）；
});
};
函数项内容（k）{
$（“#”+k）.show（）；
};

您是否考虑过只在单击按钮时生成

，这样在轮询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);
});

setInterval（refreshXml，1500）；
函数refreshXml（）{
var req=$.get（'Administration/data/people.xml'）；
请求完成（函数（xml）{
//更新用于创建按钮的全局XML变量。
window.peopleXml=xml；
//清除现有按钮。
$（'#loadMe'）.empty（）；
//为每个XML person实体显示一个按钮。
$（xml）.find（'fullName'）.each（函数（索引）{
var fullName=$（this.text（）；
$('', {
“类”：“我的按钮”，
值：$（this）.sibbines（'id'）.text（），
文本：全名
}).appendTo（'loadMe'）；
});
//更新任何已可见的person div。
$（'#toadMe.person'）。每个（函数（）{
//从前面设置的数据person ID中获取ID。
var id=$（this.data（'person-id'）；
出示身份证；
});
});
}
功能显示人员（id）{
$（“#个人详细信息-”+id）.remove（）；
get_person（id）.appendTo（“#toadMe”）；
}
函数get_person（id）{
var$person=$（window.peopleXml）.find（'id:contains（'+id+'））.parent（）；
变量$div=$（''{
“类”：“人”，
“数据人员id”：id，
id:“个人详细信息-”+id
});
$（''，{text:$person.find（'firstName'）.text（）}）.appendTo（$div）；
$（''，{text:$person.find（'lastName'）.text（）}.appendTo（$div）；
$（''，{text:$person.find（'age'）.text（）}.appendTo（$div）；
$（''，{text:$person.find（'homightry'）.text（）}.appendTo（$div）；
$（''，{text:$person.find（'job'）.text（）}）.appendTo（$div）；
返回$div；
}
$（文档）。在（'单击'，'.mybutton'，函数（）上{
显示人物（此值）；
});

---

随着XML文件的增长，这种方法将是值得的，即使它一开始看起来有点复杂。每1.5秒为每个可能的

人
预生成
的开销将开始明显滞后于浏览器，因为XML文档变得越来越大。
Dave，实际上，我在设置按钮值时发现了语法错误，我添加了
.text（）
，这似乎解决了问题。另外，我需要替换
#toadMe
中的数据，而不是附加到
#toadMe
。但是我记不起它的功能了。。。一旦我找到这个函数，它看起来就可以工作了！！！非常感谢，很抱歉。我在这里的文本区域中输入了它，但没有一个好的方法来测试它。您是希望在给定时间只允许一个人的div在#toadMe中可见，还是希望确保每个人的div只显示一个副本（即，可以打开多个，但不能重复）？没问题。查看我的更新，看看这是否更接近您的目标。
click处理程序中的this.id
应该是
this.value
。