更改多个图像与jQuery

因此，这里是我使用更改多个图像与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"); 
      } 
     }); 
    }); 
});

JQuery的，那就是用它的时候，我发现了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"

任何想法？

来源

2014-10-26 Exuviax

您的问题是什么？编写一个函数，该函数获取适当元素的'image.src'，将'-online'插入它，并将其写回'image.src'。 – Barmar 2014-10-26 22:33:39

基本上我只是希望它检查通道是否在线，并将-online添加到现有图像的末尾，或者如果通道在检查时返回“null”，则将其删除。或者，如果我不能那么做，只需设置孔的图像。 – Exuviax 2014-10-26 22:40:00

我知道你想要做什么，这不是一个问题。请展示您尝试实施它，并解释您遇到的问题。然后我们会尽力帮助您解决问题。 – Barmar 2014-10-27 00:01:28

试试下面的代码

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)。再次调用相同的功能进行更新

来源

2014-10-27 04:43:41

要添加'-online'，你可以只做'source.replace（“。png”，“-online.png”）;'（只是就像你在删除'-online'时一样，不需要切片） – myfunkyside 2014-10-27 07:31:13

更改多个图像与jQuery

回答

相关问题