Javascript - 使用“.load”重新加载元素后条件格式中断
Javascript - conditional formatting breaks after element reload using ".load"
我是 JavaScript / JQuery 的新手,对简单的条件格式设置函数有一些疑问。条件格式功能本身在初始页面加载时工作正常;但是,在每 60 秒执行一次设置为 运行 的元素重新加载后,它会再次破坏条件格式。
这是JavaScript:
$(document).ready(function(){
$('.ticker-item:contains("-")').css('color', 'red');
$('.ticker-item:contains("+")').css('color', '#2FA702');
$('.carousel-item h3:contains("Closed")').css('color', 'red');
$('.carousel-item h3:contains("Open")').css('color', '#2FA702');
});
var refreshTickers = setInterval(function () {
$("#top-bar").load(location.href+" #top-bar>*","");
}, 60000);
可能值得一提的是,只有 ticker-item
格式在元素重新加载后出错。 carousel-item
格式工作正常。 ticker-item
s 在 #top-bar
元素内,而 carousel-item
s 不在,所以对我来说很明显问题出在 #top-bar
元素内,因为重新加载。
我也尝试了下面的代码,但没有用:
$(document).ready(function(){
$('.ticker-item:contains("-")').css('color', 'red');
$('.ticker-item:contains("+")').css('color', '#2FA702');
$('.carousel-item h3:contains("Closed")').css('color', 'red');
$('.carousel-item h3:contains("Open")').css('color', '#2FA702');
});
var refreshTickers = setInterval(function () {
$("#top-bar").load(location.href+" #top-bar>*","");
$('.ticker-item:contains("-")').css('color', 'red');
$('.ticker-item:contains("+")').css('color', '#2FA702');
}, 60000);
更奇怪的是,使用这段代码,如果我将重新加载的间隔更改为 10 秒,它似乎会破坏格式几秒钟,然后再次修复它,就好像它在等待在赶上自己之前要执行的其余功能。
正如我所说,我是 JS 的新手,我到处寻找解决方案。我做错了什么吗?
如果您需要其他任何东西(即 HTML),请告诉我。
在此先感谢您的帮助。
如果你想一次又一次地完成它,你应该为此创建一个单独的函数。
加载函数在完成时会触发回调,您可以使用该回调再次重新格式化。
function reFormat(){
$('.ticker-item:contains("-")').css('color', 'red');
$('.ticker-item:contains("+")').css('color', '#2FA702');
$('.carousel-item h3:contains("Closed")').css('color', 'red');
$('.carousel-item h3:contains("Open")').css('color', '#2FA702');
}
$(document).ready(function(){
reFormat();
var refreshTickers = setInterval(function () {
$("#top-bar").load(location.href+" #top-bar>*", function(){
reFormat();
});
}, 60000);
});
当您执行 .load()
时,需要花费一些时间来获取新数据并将元素插入 DOM。然而,随后的 Javascript 代码并不知道它应该等到 .load()
完成并创建新元素。
以时间轴的形式,当前发生的事情是:
- 呼叫
.load()
- 查找并设置任何
.ticker-item
存在的元素的样式
- 从
.load()
收到的数据
- 创建新的
.ticker-item
DOM 个元素
你想发生什么:
- 呼叫
.load()
- 等到从
.load()
收到数据
- 创建新的
.ticker-item
DOM 个元素
- 查找并设置任何
.ticker-item
存在的元素的样式
正是您想要的 :将您的格式化代码合并到一个函数中,然后在 .load()
完成后将其作为回调函数调用.
随着学习的进步 JavaScript,请查看 Promises
和 async
/await
。
编辑:
.load()
完成与 DOM 中出现的元素之间可能仍有细微的延迟。
找出是否属于这种情况的一种方法是在回调中调用 reFormat()
之前添加延迟:
var elementCreationDelay = 500; // experiment with this duration
var refreshTickers = setInterval(function () {
$("#top-bar").load(location.href+" #top-bar>*", function(){
setTimeout(reFormat, elementCreationDelay);
}, 60000);
我是 JavaScript / JQuery 的新手,对简单的条件格式设置函数有一些疑问。条件格式功能本身在初始页面加载时工作正常;但是,在每 60 秒执行一次设置为 运行 的元素重新加载后,它会再次破坏条件格式。
这是JavaScript:
$(document).ready(function(){
$('.ticker-item:contains("-")').css('color', 'red');
$('.ticker-item:contains("+")').css('color', '#2FA702');
$('.carousel-item h3:contains("Closed")').css('color', 'red');
$('.carousel-item h3:contains("Open")').css('color', '#2FA702');
});
var refreshTickers = setInterval(function () {
$("#top-bar").load(location.href+" #top-bar>*","");
}, 60000);
可能值得一提的是,只有 ticker-item
格式在元素重新加载后出错。 carousel-item
格式工作正常。 ticker-item
s 在 #top-bar
元素内,而 carousel-item
s 不在,所以对我来说很明显问题出在 #top-bar
元素内,因为重新加载。
我也尝试了下面的代码,但没有用:
$(document).ready(function(){
$('.ticker-item:contains("-")').css('color', 'red');
$('.ticker-item:contains("+")').css('color', '#2FA702');
$('.carousel-item h3:contains("Closed")').css('color', 'red');
$('.carousel-item h3:contains("Open")').css('color', '#2FA702');
});
var refreshTickers = setInterval(function () {
$("#top-bar").load(location.href+" #top-bar>*","");
$('.ticker-item:contains("-")').css('color', 'red');
$('.ticker-item:contains("+")').css('color', '#2FA702');
}, 60000);
更奇怪的是,使用这段代码,如果我将重新加载的间隔更改为 10 秒,它似乎会破坏格式几秒钟,然后再次修复它,就好像它在等待在赶上自己之前要执行的其余功能。
正如我所说,我是 JS 的新手,我到处寻找解决方案。我做错了什么吗?
如果您需要其他任何东西(即 HTML),请告诉我。
在此先感谢您的帮助。
如果你想一次又一次地完成它,你应该为此创建一个单独的函数。
加载函数在完成时会触发回调,您可以使用该回调再次重新格式化。
function reFormat(){
$('.ticker-item:contains("-")').css('color', 'red');
$('.ticker-item:contains("+")').css('color', '#2FA702');
$('.carousel-item h3:contains("Closed")').css('color', 'red');
$('.carousel-item h3:contains("Open")').css('color', '#2FA702');
}
$(document).ready(function(){
reFormat();
var refreshTickers = setInterval(function () {
$("#top-bar").load(location.href+" #top-bar>*", function(){
reFormat();
});
}, 60000);
});
当您执行 .load()
时,需要花费一些时间来获取新数据并将元素插入 DOM。然而,随后的 Javascript 代码并不知道它应该等到 .load()
完成并创建新元素。
以时间轴的形式,当前发生的事情是:
- 呼叫
.load()
- 查找并设置任何
.ticker-item
存在的元素的样式 - 从
.load()
收到的数据
- 创建新的
.ticker-item
DOM 个元素
你想发生什么:
- 呼叫
.load()
- 等到从
.load()
收到数据
- 创建新的
.ticker-item
DOM 个元素 - 查找并设置任何
.ticker-item
存在的元素的样式
.load()
完成后将其作为回调函数调用.
随着学习的进步 JavaScript,请查看 Promises
和 async
/await
。
编辑:
.load()
完成与 DOM 中出现的元素之间可能仍有细微的延迟。
找出是否属于这种情况的一种方法是在回调中调用 reFormat()
之前添加延迟:
var elementCreationDelay = 500; // experiment with this duration
var refreshTickers = setInterval(function () {
$("#top-bar").load(location.href+" #top-bar>*", function(){
setTimeout(reFormat, elementCreationDelay);
}, 60000);