Question

我想知道，可以修改此函数以在页面加载时运行，而不是在单击带有class =“statusbutton”的按钮时运行吗？

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$( document ).ready(function() {

    $( ".statusbutton" ).each(function(index){
        $(this).on("click", function(){
            var btnObj = this;

            $.getJSON( 'http://api.justin.tv/api/stream/list.json?channel=' + $(this).attr('id') + '&jsonp=?', function(twitchData) {

        if (typeof(twitchData[0]) !== 'undefined' && typeof(twitchData[0].stream_type) !== 'undefined') {
            if (twitchData[0].stream_type == 'live') {
                // live
                $(btnObj).css('background-color', '#00FF00');
            } else {
                // something other than live
                $(btnObj).css('background-color', '#f11');
            }
        }else{
            // no data or invalid data from twitch
            $(btnObj).css('background-color', '#f11');
        }



});

        });
    });
});

</script>

Answer 1

假设您的按钮在单击时应保留触发AJAX请求的能力。您可以在.statusbutton之后和绑定事件处理程序之后手动触发DOM ready按钮上的click事件。

$(document).ready(function() {

    $(".statusbutton").each(function(index) {

        $(this).on("click", function() {
            var btnObj = this;
            $.getJSON('http://api.justin.tv/api/stream/list.json?channel=' + $(this).attr('id') + '&jsonp=?', function(twitchData) {
                if (typeof(twitchData[0]) !== 'undefined' && typeof(twitchData[0].stream_type) !== 'undefined') {
                    if (twitchData[0].stream_type == 'live') {
                        // live
                        $(btnObj).css('background-color', '#00FF00');
                    } else {
                        // something other than live
                        $(btnObj).css('background-color', '#f11');
                    }
                } else {
                    // no data or invalid data from twitch
                    $(btnObj).css('background-color', '#f11');
                }
            });
        });

    }).trigger('click'); // manually trigger 'click' to initiate AJAX request  

});

一个根据抽搐流的状态更新按钮颜色的功能

1 个答案: