Joe Knight Joe Knight - 6 months ago 9
HTML Question

How to determine the img source using Jquery/Javascript on pageload?

I've gone through many SO threads, I can't seem to find a working solution.

All I'm trying to do is when the page loads, the site pushes all elements with the ".home" class into the array arr. Then, the script parses through each element in the array and tries to match it with a string. For example, right now all I have is a check to see if the element has the words "Boston" in it, in which case I want to make the image source for ".homeimage" the linked imgur link. I'm aware it's not wise to host images on imgur for these reasons, I'm just trying to check if it works. Below this test I have some redundant code I was practicing with that I found in a SO thread, changing the color of text to gray. I figured changing attributes is the same.

my html code:

<td colspan = "3"width=400px class = "home"><b><%= game.home %></b></td>

<td colspan = "3"><img style="width:150px;height:128px;" class = "homeimage"></td>





my javascript/jquery code:


<script>
var arr=[];
$(document).ready( function(){
$(".home").each(function(){ arr.push($(this));});
for(i = 0; i < arr.length; i++){
if(arr[i].indexOf "Boston" != -1){
$('.homeimage img').attr("src","http://i.imgur.com/s5WKBjy.png");
}
}
$.each(arr,function(key,val){
val.css('color','gray')}); //something redundant i was testing out
});
</script>






additional questions:

When I have multiple image with the .homeimage class, and multiple checks to determine the image source, will it make all of the images in the .homeimage class that src at the end? So whatever the last image that gets checked is the image src for all of the images with the ".homeimage" class? I don't want that. How can I uniquely make each image? Make a custom id instead of a class for each div? Also, does this script have to be below the html in question? Or does that not matter

Thanks for the future advice you all.

Answer
// I don't quite understand what you want to do.
// Since you type too much, and make no highlights.
// but here are somethings I found:
  var arr = []; // this array is going to contain all tags (like td) with class '.home'
  if(arr[i].innerHTML.indexOf("Boston") != -1) { } // indexOf() won't work on DOM element

// then arr[0] must be a DOM element, so why you call .indexOf("Boston") on it?

// next, $('.homeimage img') all return DOM element with class 'homeimage' or with tagName 'img'
  $('img.homeimage'); // this may what you want to do.

// Alright, I try to give you an answer.
// this oImgUrl works as a map from some ((String))-->((img url))
  var oImgUrl = {
    'Boston': 'http://another.imageurl.com/boston.png',
    'NewYork': 'http://another.imageurl.com/newyork.png'
  };

// I take your "arr"  unchanged
// this will test every element in arr
// if carry String like 'Boston' or 'NewYork'
//   then find the img tag (img.homeimage) in it.
//   then apply URL string to img tag
  for (var i=0, length=arr.length; i < length; i++) {
    if(arr[i].innerHTML.indexOf("Boston") != -1) {
      arr[i].find('img.homeimage').attr('src', oImgUrl['Boston']);
      continue;
    } 
    if(arr[i].innerHTML.indexOf("New York") != -1) {
      arr[i].find('img.homeimage').attr('src', oImgUrl['NewYork']);
      continue;
    } 
  }

example html:

<td class='home'>Welcome to Boston!<img class='homeimage'></td>
<td class='home'>Welcome to New York!<img class='homeimage'></td>

answers:

Question 1: Custom ID?
JavaScript will find these two td.home and add them into arr.
then, apply different image url to img tag
according to innerHTML of the td tag.
when doing this, you don't need to set each img tag an unique ID.
Question 2: Script place below html?
No, you don't have to.
You hold all thses script in docuement ready function
so, they will only work when HTML DOM is ready.
in another words, no matter where you place this script,
they will be invoked after Every Tag is ready.

Comments