生成的函數

Question

我不確定這是最佳實踐還是完全錯誤的方法來做到這一點，但我試圖動態生成一些函數並在按鈕單擊時使用它們。這些按鈕也是動態生成的。

我正在爲我的公會網站製作一個twitch流切換器，而不是爲每個註冊的流器手動添加越來越多的代碼，我只想添加一個函數調用。現在我有這個：

<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替換流的URL，並且當它不是通過該函數生成時，它完美地工作。

生成的函數會附加到腳本的底部，以便它們位於同一組腳本標記中。有什麼我失蹤，會阻止他們從按鈕onclick調用訪問？

Answer 1

默認情況下，在頁面中包含該函數會更好，然後將該名稱作爲參數傳遞。有這樣做的方法很多，但是這是我採取的辦法......

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

Answer 2

動態追加內容的腳本標記是不是一個偉大的模式可供遵循 - 並可能不會在所有的瀏覽器。

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