Question

我不确定这是最佳做法还是完全错误的做法，但我试图动态生成一些功能并在按钮点击时使用它们。按钮也是动态生成的。

我正在为我的公会网站制作一个抽搐流切换器，而不是手动为每个注册的流媒体添加越来越多的代码我只想添加一个函数调用。现在我有这个：

<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来显示状态，脚本会生成按钮和功能。函数本身修改了embed对象，用所选的streamers url替换了流的URL，当它不是通过此函数生成时，它可以正常工作。

生成的函数将附加到脚本的底部，因此它们位于同一组脚本标记中。是否有一些我错过的东西会阻止它们被按钮的onclick调用访问？

Answer 1

动态地将内容附加到脚本标记并不是一个很好的模式 - 并且可能无法在所有浏览器中使用。

更好的解决方案是在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'));
})

Answer 2

默认情况下，最好在页面中包含该函数，然后将该名称作为参数传递。有很多方法可以做到这一点，但这是我采取的方法......

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 + ");}}");
    }
}

生成的功能

2 个答案: