javascript - jQuery 函数更新 div 但不更新图像

Question

我的 Nagios extension 中有以下 jQuery 代码Mediawiki 以给定的时间间隔刷新页面中的内容。这对于 div 来说效果很好，但不会更新图像(图表)。例如，以下是页面中嵌入的其中一个图表的 html，

<img id="pnp4img1" class="graph" src="http://rouser:ropass@192.168.1.2/pnp4nagios/image?host=aws-us&amp;srv=Check_MK&amp;view=0&amp;graph_width=500&amp;graph_height=100">

我知道还有其他方法可以通过更新 src 属性来更新图像，但我确实尝试坚持使用下面的函数并从 ajax 响应中提取图像数据。

希望有人能帮忙:)

(function(mw, $) {

    var nagiosRefreshInterval = mw.config.get('wgNagiosRefresh') * 1000;
    mw.hook('wikipage.content').add(function($content) {
        setTimeout(worker, nagiosRefreshInterval);
    });

    function worker() {
        $.ajax({
            url: location.href,
            success: function(data) {
                var $data = $(data);
                $(".qtip").remove();
                $('.status, .stateInfoPanel, img.graph').each(function(i, obj) {
                        if (obj.id != "") {
                        var id = '#' + obj.id;
                        console.log("id=" + id);
                        $(this).html($data.find(id));
                    }
                })
            },
            error: function() {
                console.log("An error occured with the refresh");
            }
        });
        // Schedule the next request when the current one's complete
        setTimeout(worker, nagiosRefreshInterval);
    }

})(mediaWiki, jQuery);

Answer 1

您不能在图像上使用 .html()，因为它没有 HTML 内容。这就是为什么它只适用于 div 。

如果元素是图像，您应该使用.replaceWith()将其替换为新元素。

(function(mw, $) {

    var nagiosRefreshInterval = mw.config.get('wgNagiosRefresh') * 1000;
    mw.hook('wikipage.content').add(function($content) {
        setTimeout(worker, nagiosRefreshInterval);
    });

    function worker() {
        $.ajax({
            url: location.href,
            success: function(data) {
                var $data = $(data);
                $(".qtip").remove();
                $('.status, .stateInfoPanel, img.graph').each(function(i, obj) {
                    if (obj.id != "") {
                        var id = '#' + obj.id;
                        console.log("id=" + id);

                        // If is image, replace it
                        if(this.tagName == 'IMG'){
                            $(this).replaceWith($data.find(id).clone());
                        }
                        // Other elements
                        else{
                            $(this).html($data.find(id));
                        }
                    }
                })
            },
            error: function() {
                console.log("An error occured with the refresh");
            }
        });
        // Schedule the next request when the current one's complete
        setTimeout(worker, nagiosRefreshInterval);
    }

})(mediaWiki, jQuery);

另一种方法是为每个图像提供包装。假设 .imageWrapper 并刷新它们，而不是 img.graph。

您的选择器将是

$('.status, .stateInfoPanel, .imgWrapper')