Question

所以这是我正在使用的JQuery

jQuery(document).ready(function($) {
    $('.ltwitch').each(function () {
        var tnick = $(this).data('tnick');
        var span = $(this).next();
        $.getJSON("https://api.twitch.tv/kraken/streams/"+tnick+".json?callback=?", function(c) {
            if (c.stream == null) {
                span.html("Offline");
            } else {
                span.html("Online");
            }
        });
    });
});

当我找到它时，它上面的HTML

<a class="ltwitch" href="http://www.twitch.tv/ifstudios" data-tnick="IFStudios">IFStudios</a> (<span>...</span>)

RoosterTeeth（...）

现在我想做什么，我的HTML看起来像这样

<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
                    <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                            <i class="fa fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="img/portfolio/sweet.png" class="img-responsive" alt="">
                </a>

基本上当一个频道变为现场时我想把img src从我设置的图像切换到同一个图像，最后是-online。所以我可以在网站上有多张图片，但我可以让图片的变化取决于谁是谁，谁不是。

所以，如果我有

                    <a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
                    <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                            <i class="fa fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="img/portfolio/sweet.png" class="img-responsive" alt="">
                </a>

当她的频道上线时，它会转到

                    <a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
                    <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                            <i class="fa fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="img/portfolio/sweet-online.png" class="img-responsive" alt="">

或者如果是

 <img src="img/portfolio/carrot.png"

它将转向

 <img src="img/portfolio/carrot-online.png"

有什么想法吗？

Answer 1

尝试以下代码

jQuery(document).ready(function($) {
    $('.ltwitch').each(function () {
        var tnick = $(this).data('tnick');
        var span = $(this).next();
        $.getJSON("https://api.twitch.tv/kraken/streams/"+tnick+".json?callback=?", function(c) {
            var img = $(img-selector);
            var source = img.attr('src');
            if (c.stream != null) {
                // Online
                if(source.indexOf('.png') != -1){
                    source = source.replace(".png", "-online.png");
                    img.attr('src',source);
                }
            }
            else{
                // Offline
                source.replace("-online", "");
                img.attr('src',source);
            }
        });
    });
});

注意：您必须将正确的图像选择器传递给$(img-selector)。同样再次调用相同的函数进行刷新

使用JQuery更改多个图像

1 个答案: