提问人：Arjan_IO 提问时间：6/30/2023 最后编辑：traynorArjan_IO 更新时间：7/4/2023 访问量：312
更新“突发新闻行情”中的数据
Update data in 'breaking news ticker'
问：
信息：我有一个当地体育俱乐部的网站，显示最新消息。我使用了一个名为“突发新闻代码”的示例代码，可以在这里找到（示例 4）。效果很好。
问题：我想每 x 分钟更新一次新闻。这些标题存储在一个文件中，如果我访问，则由节点服务器发送。/data/headlines。初始加载有效，但代码的任何后续运行都会生成一个 .Uncaught TypeError: $(...).breakingNews is not a function at fillTicker (schemeScripts.js:15:22)
我尝试过：将其全部封装在一个函数中，然后执行该函数。使用 触发函数。这会产生上述错误。setInterval
代码：scheme.ejs
<div class="bn-breaking-news bn-effect-scroll bn-direction-ltr" id="newsTicker" style="height: 40px; line-height: 38px; border-radius: 2px; border-width: 1px;">
<div class="bn-label" style="background: #A32638;">NIEUWS</div>
<div class="bn-news" style="right: 0px;">
<ul>
<li>
<span class="bn-loader-text">Loading news items...</span>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#newsTicker").breakingNews({
position : 'fixed-bottom',
source: {
type:'json',
url:'../data/headlines',
limit:20,
showingField:'title',
linkEnabled: false,
target:'_blank',
seperator: '<span class="bn-seperator" style="background-image:url(./images/logo.png);"></span>',
errorMsg: 'Json file not loaded. Please check the settings.'
}
});
fillTicker()
setInterval(fillTicker, msToNextHour())
})
</script>
schemeScripts.js（包含填充Ticker）
function fillTicker() {
console.log("test2")
$("#newsTicker").breakingNews({
position : 'fixed-bottom',
source: {
type:'json',
url:'../data/headlines',
limit:20,
showingField:'title',
linkEnabled: false,
target:'_blank',
seperator: '<span class="bn-seperator" style="background-image:url(./images/logo.png);"></span>',
errorMsg: 'Json file not loaded. Please check the settings.'
}
});
}
我可以想象这会产生一个 TypeError，但我真的很挣扎/无法让我的头脑来生成有效的代码。最好不要再次加载整个页面。任何帮助/提示不胜感激！
编辑该文件也会加载。也许答案就在这个文件中：breaking-news-ticker.min.js
!function(p) {
"use strict";
p.breakingNews = function(e, t) {
var i = {
effect: "scroll",
direction: "ltr",
height: 40,
fontSize: "default",
themeColor: "default",
background: "default",
borderWidth: 1,
radius: 2,
source: "html",
rss2jsonApiKey: "",
play: !0,
delayTimer: 4e3,
scrollSpeed: 2,
stopOnHover: !0,
position: "auto",
zIndex: 99999
}
, a = this;
a.settings = {},
a._element = p(e),
a._label = a._element.children(".bn-label"),
a._news = a._element.children(".bn-news"),
a._ul = a._news.children("ul"),
a._li = a._ul.children("li"),
a._controls = a._element.children(".bn-controls"),
a._prev = a._controls.find(".bn-prev").parent(),
a._action = a._controls.find(".bn-action").parent(),
a._next = a._controls.find(".bn-next").parent(),
a._pause = !1,
a._controlsIsActive = !0,
a._totalNews = a._ul.children("li").length,
a._activeNews = 0,
a._interval = !1,
a._frameId = null;
var o = function() {
if (0 < a._label.length && ("rtl" == a.settings.direction ? a._news.css({
right: a._label.outerWidth()
}) : a._news.css({
left: a._label.outerWidth()
})),
0 < a._controls.length) {
var e = a._controls.outerWidth();
"rtl" == a.settings.direction ? a._news.css({
left: e
}) : a._news.css({
right: e
})
}
if ("scroll" === a.settings.effect) {
var t = 0;
a._li.each(function() {
t += p(this).outerWidth()
}),
t += 50,
a._ul.css({
width: t
})
}
}
, s = function() {
var l = new XMLHttpRequest;
l.onreadystatechange = function() {
if (4 == l.readyState && 200 == l.status) {
var e = JSON.parse(l.responseText)
, t = ""
, i = "";
switch (a.settings.source.showingField) {
case "title":
i = "title";
break;
case "description":
i = "description";
break;
case "link":
i = "link";
break;
default:
i = "title"
}
var s = "";
void 0 !== a.settings.source.seperator && void 0 !== typeof a.settings.source.seperator && (s = a.settings.source.seperator);
for (var n = 0; n < e.items.length; n++)
a.settings.source.linkEnabled ? t += '<li><a target="' + a.settings.source.target + '" href="' + e.items[n].link + '">' + s + e.items[n][i] + "</a></li>" : t += "<li><a>" + s + e.items[n][i] + "</a></li>";
a._ul.empty().append(t),
a._li = a._ul.children("li"),
a._totalNews = a._ul.children("li").length,
o(),
"scroll" != a.settings.effect && d(),
a._li.find(".bn-seperator").css({
height: a.settings.height - 2 * a.settings.borderWidth
}),
f()
}
}
,
l.open("GET", "https://api.rss2json.com/v1/api.json?rss_url=" + a.settings.source.url + "&count=" + a.settings.source.limit + "&api_key=" + a.settings.source.rss2jsonApiKey, !0),
l.send()
}
, n = function() {
p.getJSON(a.settings.source.url, function(e) {
var t = ""
, i = "";
i = "undefined" === a.settings.source.showingField ? "title" : a.settings.source.showingField;
var s = "";
void 0 !== a.settings.source.seperator && void 0 !== typeof a.settings.source.seperator && (s = a.settings.source.seperator);
for (var n = 0; n < e.length && !(n >= a.settings.source.limit); n++)
a.settings.source.linkEnabled ? t += '<li><a target="' + a.settings.source.target + '" href="' + e[n].link + '">' + s + e[n][i] + "</a></li>" : t += "<li><a>" + s + e[n][i] + "</a></li>",
"undefined" === e[n][i] && console.log('"' + i + '" does not exist in this json.');
a._ul.empty().append(t),
a._li = a._ul.children("li"),
a._totalNews = a._ul.children("li").length,
o(),
"scroll" != a.settings.effect && d(),
a._li.find(".bn-seperator").css({
height: a.settings.height - 2 * a.settings.borderWidth
}),
f()
})
}
, l = function() {
var e = parseFloat(a._ul.css("marginLeft"));
e -= a.settings.scrollSpeed / 2,
a._ul.css({
marginLeft: e
}),
e <= -a._ul.find("li:first-child").outerWidth() && (a._ul.find("li:first-child").insertAfter(a._ul.find("li:last-child")),
a._ul.css({
marginLeft: 0
})),
!1 === a._pause && (a._frameId = requestAnimationFrame(l),
window.requestAnimationFrame && a._frameId || setTimeout(l, 16))
}
, r = function() {
var e = parseFloat(a._ul.css("marginRight"));
e -= a.settings.scrollSpeed / 2,
a._ul.css({
marginRight: e
}),
e <= -a._ul.find("li:first-child").outerWidth() && (a._ul.find("li:first-child").insertAfter(a._ul.find("li:last-child")),
a._ul.css({
marginRight: 0
})),
!1 === a._pause && (a._frameId = requestAnimationFrame(r)),
window.requestAnimationFrame && a._frameId || setTimeout(r, 16)
}
, c = function() {
"rtl" === a.settings.direction ? a._ul.stop().animate({
marginRight: -a._ul.find("li:first-child").outerWidth()
}, 300, function() {
a._ul.find("li:first-child").insertAfter(a._ul.find("li:last-child")),
a._ul.css({
marginRight: 0
}),
a._controlsIsActive = !0
}) : a._ul.stop().animate({
marginLeft: -a._ul.find("li:first-child").outerWidth()
}, 300, function() {
a._ul.find("li:first-child").insertAfter(a._ul.find("li:last-child")),
a._ul.css({
marginLeft: 0
}),
a._controlsIsActive = !0
})
}
, u = function() {
"rtl" === a.settings.direction ? (0 <= parseInt(a._ul.css("marginRight"), 10) && (a._ul.css({
"margin-right": -a._ul.find("li:last-child").outerWidth()
}),
a._ul.find("li:last-child").insertBefore(a._ul.find("li:first-child"))),
a._ul.stop().animate({
marginRight: 0
}, 300, function() {
a._controlsIsActive = !0
})) : (0 <= parseInt(a._ul.css("marginLeft"), 10) && (a._ul.css({
"margin-left": -a._ul.find("li:last-child").outerWidth()
}),
a._ul.find("li:last-child").insertBefore(a._ul.find("li:first-child"))),
a._ul.stop().animate({
marginLeft: 0
}, 300, function() {
a._controlsIsActive = !0
}))
}
, d = function() {
switch (a._controlsIsActive = !0,
a.settings.effect) {
case "typography":
a._ul.find("li").hide(),
a._ul.find("li").eq(a._activeNews).width(30).show(),
a._ul.find("li").eq(a._activeNews).animate({
width: "100%",
opacity: 1
}, 1500);
break;
case "fade":
a._ul.find("li").hide(),
a._ul.find("li").eq(a._activeNews).fadeIn();
break;
case "slide-down":
a._totalNews <= 1 ? a._ul.find("li").animate({
top: 30,
opacity: 0
}, 300, function() {
p(this).css({
top: -30,
opacity: 0,
display: "block"
}),
p(this).animate({
top: 0,
opacity: 1
}, 300)
}) : (a._ul.find("li:visible").animate({
top: 30,
opacity: 0
}, 300, function() {
p(this).hide()
}),
a._ul.find("li").eq(a._activeNews).css({
top: -30,
opacity: 0
}).show(),
a._ul.find("li").eq(a._activeNews).animate({
top: 0,
opacity: 1
}, 300));
break;
case "slide-up":
a._totalNews <= 1 ? a._ul.find("li").animate({
top: -30,
opacity: 0
}, 300, function() {
p(this).css({
top: 30,
opacity: 0,
display: "block"
}),
p(this).animate({
top: 0,
opacity: 1
}, 300)
}) : (a._ul.find("li:visible").animate({
top: -30,
opacity: 0
}, 300, function() {
p(this).hide()
}),
a._ul.find("li").eq(a._activeNews).css({
top: 30,
opacity: 0
}).show(),
a._ul.find("li").eq(a._activeNews).animate({
top: 0,
opacity: 1
}, 300));
break;
case "slide-left":
a._totalNews <= 1 ? a._ul.find("li").animate({
left: "50%",
opacity: 0
}, 300, function() {
p(this).css({
left: -50,
opacity: 0,
display: "block"
}),
p(this).animate({
left: 0,
opacity: 1
}, 300)
}) : (a._ul.find("li:visible").animate({
left: "50%",
opacity: 0
}, 300, function() {
p(this).hide()
}),
a._ul.find("li").eq(a._activeNews).css({
left: -50,
opacity: 0
}).show(),
a._ul.find("li").eq(a._activeNews).animate({
left: 0,
opacity: 1
}, 300));
break;
case "slide-right":
a._totalNews <= 1 ? a._ul.find("li").animate({
left: "-50%",
opacity: 0
}, 300, function() {
p(this).css({
left: "50%",
opacity: 0,
display: "block"
}),
p(this).animate({
left: 0,
opacity: 1
}, 300)
}) : (a._ul.find("li:visible").animate({
left: "-50%",
opacity: 0
}, 300, function() {
p(this).hide()
}),
a._ul.find("li").eq(a._activeNews).css({
left: "50%",
opacity: 0
}).show(),
a._ul.find("li").eq(a._activeNews).animate({
left: 0,
opacity: 1
}, 300));
break;
default:
a._ul.find("li").hide(),
a._ul.find("li").eq(a._activeNews).show()
}
}
, f = function() {
if (a._pause = !1,
a.settings.play)
switch (a.settings.effect) {
case "scroll":
"rtl" === a.settings.direction ? a._ul.width() > a._news.width() ? r() : a._ul.css({
marginRight: 0
}) : a._ul.width() > a._news.width() ? l() : a._ul.css({
marginLeft: 0
});
break;
default:
a.pause(),
a._interval = setInterval(function() {
a.next()
}, a.settings.delayTimer)
}
}
, _ = function() {
a._element.width() < 480 ? (a._label.hide(),
"rtl" == a.settings.direction ? a._news.css({
right: 0
}) : a._news.css({
left: 0
})) : (a._label.show(),
"rtl" == a.settings.direction ? a._news.css({
right: a._label.outerWidth()
}) : a._news.css({
left: a._label.outerWidth()
}))
};
a.init = function() {
if (a.settings = p.extend({}, i, t),
"fixed-top" === a.settings.position ? a._element.addClass("bn-fixed-top").css({
"z-index": a.settings.zIndex
}) : "fixed-bottom" === a.settings.position && a._element.addClass("bn-fixed-bottom").css({
"z-index": a.settings.zIndex
}),
"default" != a.settings.fontSize && a._element.css({
"font-size": a.settings.fontSize
}),
"default" != a.settings.themeColor && (a._element.css({
"border-color": a.settings.themeColor,
color: a.settings.themeColor
}),
a._label.css({
background: a.settings.themeColor
})),
"default" != a.settings.background && a._element.css({
background: a.settings.background
}),
a._element.css({
height: a.settings.height,
"line-height": a.settings.height - 2 * a.settings.borderWidth + "px",
"border-radius": a.settings.radius,
"border-width": a.settings.borderWidth
}),
a._li.find(".bn-seperator").css({
height: a.settings.height - 2 * a.settings.borderWidth
}),
a._element.addClass("bn-effect-" + a.settings.effect + " bn-direction-" + a.settings.direction),
o(),
"object" == typeof a.settings.source)
switch (a.settings.source.type) {
case "rss":
"rss2json" === a.settings.source.usingApi ? (s(),
0 < a.settings.source.refreshTime && setInterval(function() {
a._activeNews = 0,
a.pause(),
a._ul.empty().append('<li style="display:block; padding-left:10px;"><span class="bn-loader-text">......</span></li>'),
setTimeout(function() {
s()
}, 1e3)
}, 1e3 * a.settings.source.refreshTime * 60)) : ((l = new XMLHttpRequest).open("GET", "https://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent('select * from rss where url="' + a.settings.source.url + '" limit ' + a.settings.source.limit) + "&format=json", !0),
l.onreadystatechange = function() {
if (4 == l.readyState)
if (200 == l.status) {
var e = JSON.parse(l.responseText)
, t = ""
, i = "";
switch (a.settings.source.showingField) {
case "title":
i = "title";
break;
case "description":
i = "description";
break;
case "link":
i = "link";
break;
default:
i = "title"
}
var s = "";
"undefined" != a.settings.source.seperator && void 0 !== a.settings.source.seperator && (s = a.settings.source.seperator);
for (var n = 0; n < e.query.results.item.length; n++)
a.settings.source.linkEnabled ? t += '<li><a target="' + a.settings.source.target + '" href="' + e.query.results.item[n].link + '">' + s + e.query.results.item[n][i] + "</a></li>" : t += "<li><a>" + s + e.query.results.item[n][i] + "</a></li>";
a._ul.empty().append(t),
a._li = a._ul.children("li"),
a._totalNews = a._ul.children("li").length,
o(),
"scroll" != a.settings.effect && d(),
a._li.find(".bn-seperator").css({
height: a.settings.height - 2 * a.settings.borderWidth
}),
f()
} else
a._ul.empty().append('<li><span class="bn-loader-text">' + a.settings.source.errorMsg + "</span></li>")
}
,
l.send(null));
break;
case "json":
n(),
0 < a.settings.source.refreshTime && setInterval(function() {
a._activeNews = 0,
a.pause(),
a._ul.empty().append('<li style="display:block; padding-left:10px;"><span class="bn-loader-text">......</span></li>'),
setTimeout(function() {
n()
}, 1e3)
}, 1e3 * a.settings.source.refreshTime * 60);
break;
default:
console.log('Please check your "source" object parameter. Incorrect Value')
}
else
"html" === a.settings.source ? ("scroll" != a.settings.effect && d(),
f()) : console.log('Please check your "source" parameter. Incorrect Value');
var l;
a.settings.play ? a._action.find("span").removeClass("bn-play").addClass("bn-pause") : a._action.find("span").removeClass("bn-pause").addClass("bn-play"),
a._element.on("mouseleave", function(e) {
var t = p(document.elementFromPoint(e.clientX, e.clientY)).parents(".bn-breaking-news")[0];
p(this)[0] !== t && (!0 === a.settings.stopOnHover ? !0 === a.settings.play && a.play() : !0 === a.settings.play && !0 === a._pause && a.play())
}),
a._element.on("mouseenter", function() {
!0 === a.settings.stopOnHover && a.pause()
}),
a._next.on("click", function() {
a._controlsIsActive && (a._controlsIsActive = !1,
a.pause(),
a.next())
}),
a._prev.on("click", function() {
a._controlsIsActive && (a._controlsIsActive = !1,
a.pause(),
a.prev())
}),
a._action.on("click", function() {
a._controlsIsActive && (a._action.find("span").hasClass("bn-pause") ? (a._action.find("span").removeClass("bn-pause").addClass("bn-play"),
a.stop()) : (a.settings.play = !0,
a._action.find("span").removeClass("bn-play").addClass("bn-pause")))
}),
_(),
p(window).on("resize", function() {
_(),
a.pause(),
a.play()
})
}
,
a.pause = function() {
a._pause = !0,
clearInterval(a._interval),
cancelAnimationFrame(a._frameId)
}
,
a.stop = function() {
a._pause = !0,
a.settings.play = !1
}
,
a.play = function() {
f()
}
,
a.next = function() {
!function() {
switch (a.settings.effect) {
case "scroll":
c();
break;
default:
a._activeNews++,
a._activeNews >= a._totalNews && (a._activeNews = 0),
d()
}
}()
}
,
a.prev = function() {
!function() {
switch (a.settings.effect) {
case "scroll":
u();
break;
default:
a._activeNews--,
a._activeNews < 0 && (a._activeNews = a._totalNews - 1),
d()
}
}()
}
,
a.init()
}
,
p.fn.breakingNews = function(t) {
return this.each(function() {
if (null == p(this).data("breakingNews")) {
var e = new p.breakingNews(this,t);
p(this).data("breakingNews", e)
}
})
}
}(jQuery);
答：
1赞
traynor
7/2/2023
#1
该错误表明该插件已被删除，因此请确保它没有被其他地方操纵。
为了实现重新加载，需要重置插件，以及所有数据和侦听器等，因此正确的方法是使用重置方法扩展插件。
实现此目的的一种快速而肮脏的方法是替换间隔函数中的股票代码容器。
// html
let newsTickerHTML;
$(document).ready(function () {
// store ticker clean html to replace later
newsTickerHTML = $('#newsTicker').parent().html();
以及以后：
function fillTicker() {
// reset
$('#newsTicker').parent().html(newsTickerHTML);
法典：
let newsTickerHTML;
$(document).ready(function () {
// store ticker clean html to replace later
newsTickerHTML = $('#newsTicker').parent().html();
$("#newsTicker").breakingNews({
position : 'fixed-bottom',
source: {
type:'json',
url:'../data/headlines',
limit:20,
showingField:'title',
linkEnabled: false,
target:'_blank',
seperator: '<span class="bn-seperator" style="background-image:url(./images/logo.png);"></span>',
errorMsg: 'Json file not loaded. Please check the settings.'
}
});
fillTicker()
setInterval(fillTicker, msToNextHour())
});
function fillTicker() {
// reset
$('#newsTicker').parent().html(newsTickerHTML);
console.log("test2")
$("#newsTicker").breakingNews({
position : 'fixed-bottom',
source: {
type:'json',
url:'../data/headlines',
limit:20,
showingField:'title',
linkEnabled: false,
target:'_blank',
seperator: '<span class="bn-seperator" style="background-image:url(./images/logo.png);"></span>',
errorMsg: 'Json file not loaded. Please check the settings.'
}
});
}
编辑
此外，将插件 HTML 代码包装到父容器中：
<div>
<div class="bn-breaking-news bn-effect-scroll bn-direction-ltr" id="newsTicker" style="height: 40px; line-height: 38px; border-radius: 2px; border-width: 1px;">
<div class="bn-label" style="background: #A32638;">NIEUWS</div>
<div class="bn-news" style="right: 0px;">
<ul>
<li>
<span class="bn-loader-text">Loading news items...</span>
</li>
</ul>
</div>
</div>
</div>
编辑 2
尝试合并代码，使其完全在模板中运行，并且仅依赖于 jQuery：
<div>
<div class="bn-breaking-news bn-effect-scroll bn-direction-ltr" id="newsTicker" style="height: 40px; line-height: 38px; border-radius: 2px; border-width: 1px;">
<div class="bn-label" style="background: #A32638;">NIEUWS</div>
<div class="bn-news" style="right: 0px;">
<ul>
<li>
<span class="bn-loader-text">Loading news items...</span>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
// html
let newsTickerHTML;
$(document).ready(function() {
// store ticker clean html to replace later
newsTickerHTML = $('#newsTicker').parent().html();
function fillTicker() {
console.log("test2")
// reset
$('#newsTicker').parent().html(newsTickerHTML);
$("#newsTicker").breakingNews({
position: 'fixed-bottom',
source: {
type: 'json',
url: '../data/headlines',
limit: 20,
showingField: 'title',
linkEnabled: false,
target: '_blank',
seperator: '<span class="bn-seperator" style="background-image:url(./images/logo.png);"></span>',
errorMsg: 'Json file not loaded. Please check the settings.'
}
});
}
fillTicker()
setInterval(fillTicker, msToNextHour())
});
</script>
评论
0赞
Arjan_IO
7/3/2023
Javascript 的第一次传递，包括作品，任何后续传递（通过）都会失败并产生 -errorfillTicker()setIntervalschemeScripts.js:17 Uncaught TypeError: $(...).breakingNews is not a function at fillTicker (schemeScripts.js:17:22)
0赞
traynor
7/3/2023
与我的答案中的代码一起，尝试将插件 HTML 代码放入父 div 中，请参阅更新的代码
1赞
Arjan_IO
7/4/2023
行得通！但是如何进一步实现呢？也许将其纳入我的辅助方法中？
1赞
traynor
7/4/2023
伟大。好吧，显然与初始模板中的代码存在一些冲突。所以，现在是调试的问题。尝试从初始模板中逐个添加内容，看看它何时损坏。也许是无效的 HTML，也许是您拥有的其他一些代码会造成一些冲突。（我会忘记你的方法，因为它会使你的服务器过载，并且仍然需要额外的代码..）
1赞
traynor
7/4/2023
如果你搬进去？另外，也许使用一些较旧的jQuery版本，但现在这只是疯狂的猜测。let newsTickerHTML$(document).ready(function() {...
评论
schemeScripts.js在文件的顶部导入。但是，它是在加载突发新闻行情后调用的。这部分工作正常。它正确加载。它只是不想重新加载并显示更改scheme.ejssetInterval