Javascript 为什么我的代码在第一次setInterval调用中删除复选框控件

为什么下面的代码在第一次

setInterval

调用中删除

复选框

控件

let autorefreshLabel = $('<label/>', {
    text: 'Atuorefresh after ' + autorefreshTimer + ' seconds...'
});
let autorefreshCheckbox = $('<input/>', {
    type: 'checkbox'
});
autorefreshLabel.prepend(autorefreshCheckbox);
$('#some-id').append(autorefreshLabel);

setInterval(function() {
    autorefreshTimer -= 1;
    autorefreshLabel.text('Atuorefresh after ' + autorefreshTimer + ' seconds...');
}, 1000);

让autorefreshLabel=$（“”{
文本：“+autorefreshTimer+”秒后的ATUOFREFRESH…”
});
让autorefreshCheckbox=$（“”{
键入：“复选框”
});
autorefreshLabel.prepend（autorefreshCheckbox）；
$（'#some id'）.append（autorefreshLabel）；
setInterval（函数（）{
自动刷新计时器-=1；
autorefreshLabel.text（“+autorefreshTimer+”秒…”后的ATUOFREFRESH刷新）；
}, 1000);

因为这是你告诉它的。您已将复选框放在标签内，并在

setInterval

回调中使用

text

函数将该标签的所有内容完全替换为给定文本

如果要在不替换复选框的情况下替换文本，使用jQuery最简单的方法是为文本使用span：

let autorefreshLabel = $('<label/>', {
    html: '<span>Atuorefresh after ' + autorefreshTimer + ' seconds...</span>'
});
let autorefreshCheckbox = $('<input/>', {
    type: 'checkbox'
});
autorefreshLabel.prepend(autorefreshCheckbox);
$('#some-id').append(autorefreshLabel);

let autorefreshLabel = $('<label/>');
let autorefreshCheckbox = $('<input/>', {
    type: 'checkbox'
}).appendTo(autorefreshLabel);
let autorefreshText = $('<span />').appendTo(autorefreshLabel);

$('#some-id').append(autorefreshLabel);

var autorefreshTimer = 100;
setInterval(function() {
    autorefreshTimer -= 1;
    autorefreshText.text('Autorefresh after ' + autorefreshTimer + ' seconds...');
}, 1000);

或者，您可以在删除复选框后将其放回：

autorefreshLabel.find("span").text(
  'Autorefresh after ' + autorefreshTimer + ' seconds...'
).prepend(autorefreshCheckbox);

---

因为这是你告诉它的。您已将复选框放在标签内，并在

setInterval

回调中使用

text

函数将该标签的所有内容完全替换为给定文本

如果要在不替换复选框的情况下替换文本，使用jQuery最简单的方法是为文本使用span：

let autorefreshLabel = $('<label/>', {
    html: '<span>Atuorefresh after ' + autorefreshTimer + ' seconds...</span>'
});
let autorefreshCheckbox = $('<input/>', {
    type: 'checkbox'
});
autorefreshLabel.prepend(autorefreshCheckbox);
$('#some-id').append(autorefreshLabel);

let autorefreshLabel = $('<label/>');
let autorefreshCheckbox = $('<input/>', {
    type: 'checkbox'
}).appendTo(autorefreshLabel);
let autorefreshText = $('<span />').appendTo(autorefreshLabel);

$('#some-id').append(autorefreshLabel);

var autorefreshTimer = 100;
setInterval(function() {
    autorefreshTimer -= 1;
    autorefreshText.text('Autorefresh after ' + autorefreshTimer + ' seconds...');
}, 1000);

或者，您可以在删除复选框后将其放回：

autorefreshLabel.find("span").text(
  'Autorefresh after ' + autorefreshTimer + ' seconds...'
).prepend(autorefreshCheckbox);

---

问题是因为您设置了所创建的

标签的
text（）
，该标签覆盖了该元素的所有现有内容。您可以使用
append（）

setInterval(function() {
    autorefreshLabel.append('Autorefresh after ' + autorefreshTimer + ' seconds...');
}, 1000);

为了避免在计时器的每次迭代中追加新字符串，您可以在
标签
中创建另一个元素，然后设置该元素的文本：

let autorefreshLabel = $('<label/>', {
    html: '<span>Atuorefresh after ' + autorefreshTimer + ' seconds...</span>'
});
let autorefreshCheckbox = $('<input/>', {
    type: 'checkbox'
});
autorefreshLabel.prepend(autorefreshCheckbox);
$('#some-id').append(autorefreshLabel);

let autorefreshLabel = $('<label/>');
let autorefreshCheckbox = $('<input/>', {
    type: 'checkbox'
}).appendTo(autorefreshLabel);
let autorefreshText = $('<span />').appendTo(autorefreshLabel);

$('#some-id').append(autorefreshLabel);

var autorefreshTimer = 100;
setInterval(function() {
    autorefreshTimer -= 1;
    autorefreshText.text('Autorefresh after ' + autorefreshTimer + ' seconds...');
}, 1000);

让autorefreshLabel=$（''）；
让autorefreshCheckbox=$（“”{
键入：“复选框”
}).附录（自动刷新标签）；
让autorefreshText=$（''）.appendTo（autorefreshLabel）；
$（'#some id'）.append（autorefreshLabel）；
var自动刷新计时器=100；
setInterval（函数（）{
自动刷新计时器-=1；
text（“+autorefreshTimer+'seconds…”）之后的Autorefresh；
}, 1000);

问题是因为您设置了所创建的
标签的
文本（）
，该标签覆盖了该元素的所有现有内容。您可以使用
append（）

setInterval(function() {
    autorefreshLabel.append('Autorefresh after ' + autorefreshTimer + ' seconds...');
}, 1000);

为了避免在计时器的每次迭代中追加新字符串，您可以在
标签
中创建另一个元素，然后设置该元素的文本：

let autorefreshLabel = $('<label/>', {
    html: '<span>Atuorefresh after ' + autorefreshTimer + ' seconds...</span>'
});
let autorefreshCheckbox = $('<input/>', {
    type: 'checkbox'
});
autorefreshLabel.prepend(autorefreshCheckbox);
$('#some-id').append(autorefreshLabel);

let autorefreshLabel = $('<label/>');
let autorefreshCheckbox = $('<input/>', {
    type: 'checkbox'
}).appendTo(autorefreshLabel);
let autorefreshText = $('<span />').appendTo(autorefreshLabel);

$('#some-id').append(autorefreshLabel);

var autorefreshTimer = 100;
setInterval(function() {
    autorefreshTimer -= 1;
    autorefreshText.text('Autorefresh after ' + autorefreshTimer + ' seconds...');
}, 1000);

让autorefreshLabel=$（''）；
让autorefreshCheckbox=$（“”{
键入：“复选框”
}).附录（自动刷新标签）；
让autorefreshText=$（''）.appendTo（autorefreshLabel）；
$（'#some id'）.append（autorefreshLabel）；
var自动刷新计时器=100；
setInterval（函数（）{
自动刷新计时器-=1；
text（“+autorefreshTimer+'seconds…”）之后的Autorefresh；
}, 1000);