javascript - Changing multiple images with JQuery -

javascript - Changing multiple images with JQuery -

so here jquery using

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

and html when found it

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

roosterteeth (...)

now want do, have html looks this

<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>

basically when channel becomes live want switch img src image have set to, same image -online on end. can have multiple pictures on website, can have images alter dependent on live , isn't.

so if have

<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>

when channel goes live, turn to

<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="">

or if

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

it turn

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

any ideas?

try below code

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

note: have pass right image selector $(img-selector). phone call same function 1 time again refreshing

javascript jquery html