生成的功能
Generated functions
本文关键字:功能 更新时间:2023-09-26
我不确定这是最佳实践还是完全错误的方式,但我正在尝试动态生成一些函数并在按钮单击上使用它们。按钮也是动态生成的。
我正在为我的公会网站制作一个twitch流切换器,而不是为每个注册的streamer手动添加越来越多的代码,我只想添加一个函数调用。现在我有这个:
<script id="buttonScripts">
twitchStatus('player1');
twitchStatus('player2');
twitchStatus('player3');
function twitchStatus(twitchName){
$.getJSON('https://api.twitch.tv/kraken/streams/' + twitchName, function(streamData){
if (streamData.stream == null){
$(twitchButtons).append('<button type="button" class="btn btn-fill btn-round" onclick="' + twitchName + 'Function();">' + twitchName + '''s Stream<img src="images/toffline.png"></button>');
$(buttonScripts).append('function ' + twitchName + 'Function() {var StreamObject = document.getElementById("live_embed_player_flash");if (StreamObject != null) {StreamObject.setAttribute(''data'', ''http://www.twitch.tv/widgets/live_embed_player.swf?channel=' + twitchName + ');}}');
} else {
$(twitchButtons).append('<button type="button" class="btn btn-fill btn-round" onclick="' + twitchName + 'Function();">' + twitchName + '''s Stream<img src="images/tonline.png"></button>');
$(buttonScripts).append('function ' + twitchName + 'Function() {var StreamObject = document.getElementById("live_embed_player_flash");if (StreamObject != null) {StreamObject.setAttribute(''data'', ''http://www.twitch.tv/widgets/live_embed_player.swf?channel=' + twitchName + ');}}');
}
})
};
</script>
该脚本生成按钮和功能,如果它检测到他们在或离线,但使用不同的png来显示状态。函数本身修改嵌入对象,将流的URL替换为选定的streamers URL,当它不是通过此函数生成时,它可以完美地工作。
生成的函数被附加到脚本的底部,因此它们位于同一组脚本标记中。是否有一些我错过了,会阻止他们从按钮访问onclick调用?
动态地将内容附加到脚本标签上并不是一个好的模式,并且可能不适用于所有浏览器。
更好的解决方案是在button
元素上使用单个委托事件处理程序,该处理程序使用data
属性来更改每个按钮的行为。像这样:
function twitchStatus(twitchName) {
$.getJSON('https://api.twitch.tv/kraken/streams/' + twitchName, function(streamData) {
var image = streamData.stream == null ? 'toffline' ? 'tonline';
$(twitchButtons).append('<button type="button" class="btn btn-fill btn-round" data-name="' + twitchName + '">' + twitchName + '''s Stream<img src="images/' + image + '.png"></button>');
})
};
$(twitchButtons).on('click', '.btn', function(e) {
e.preventDefault();
$("#live_embed_player_flash").attr('data', 'http://www.twitch.tv/widgets/live_embed_player.swf?channel=' + $(this).data('name'));
})
最好在默认情况下将函数包含在页面中,然后将名称作为参数传递。有很多方法可以做到这一点,但这是我要采取的方法…
function twitchStatus(twitchName) {
$.getJSON('https://api.twitch.tv/kraken/streams/' + twitchName, function(streamData) {
var $button = $("<button/>", {
"class": "btn btn-fill btn-round",
"data-twitchname": twitchName,
"text": twitchName + "'s Stream",
"type": "button"
});
if (streamData.stream == null) {
var $img = $("<img/>", { "src": "images/toffline.png" });
$button.append($img);
}
else {
var $img = $("<img/>", { "src": "images/tonline.png" });
$button.append($img);
}
$button.on("click", function() {
onButtonClick($(this).data("twitchname"));
});
$(twitchButtons).append($button);
})
};
function onButtonClick(twitchName) {
var StreamObject = document.getElementById("live_embed_player_flash");
if (StreamObject != null) {
StreamObject.setAttribute("data", "http://www.twitch.tv/widgets/live_embed_player.swf?channel=" + twitchName + ");}}");
}
}
相关文章:
- 添加文字和评论功能更新Div
- JavaScript打印功能使日历停止工作
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 如何防止网页加载后自动启动功能
- 除修剪外的其他功能
- 悬停功能触发器
- 使用angularjs向浏览器发送servlet响应(下载功能)
- 删除CKEditor工具栏按钮,但不删除功能
- 异步facebook功能
- 如何将chrome扩展功能移植到移动设备(特别是jquery和trello)
- jQuery滚动功能只工作一次
- Graphiti中是否有任何工具提示功能
- React redux初始化功能,无论状态变化如何
- 在哪里可以学习ECMAScript标准中尚未包含的JavaScript功能
- 正在获取select上的功能id
- Rhino打印功能
- 使用(navigator.geolocation)检测浏览器功能错误
- 主体单击删除功能上的输入框宽度
- JQuery使用相同的功能自动完成各种输入文本
- OpenLayers在悬停时高亮显示功能,并在单击时选择