Richard
Richard

Reputation: 826

Not sure why jQuery isn't getting the variable information

The values don't seem to be coming out and showing up on the page. It should be creating divs that pop up with the google_color and the background set to the hex value.

The app is suppose to take pixel image data and match it to my swatch library known as formatted_colors.js, which is an array. The array looks like this:

var colors = []; colors["000000"] = "black"; colors["100000"] = "black"; colors["200000"] = "black";

Maybe I'm not suppose to use the .each function? Although it is a loop.

Here is a snippet:

<div class="rounded_color" hex="<?php echo $css_color ?>" xy="<?php echo $x.$y ?>"></div>
<div id="<?php echo $x.$y ?>"></div>

<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script src="formatted_colors.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

//iterate through pixels and match rounded color to array in formatted_colors.js

$(document).ready(function() {

    $(".rounded_color").each(function(){ 
            var google_color = getColor($(this).attr("hex")); // finds a match of "hex" value in formatted_colors.js and return name to google_color
            $('#'+$(this).attr("hex")).html(google_color); // set the div's html to name which is google_color
            alert('#'+$(this).attr("id")); //testing if value is there, but shows #undefined
            $('#'+$(this).attr("hex")).css('background-color:', google_color); 
    })


// get name of color function from formatted_colors.js

function getColor(target_color){
    if (colors[target_color] == undefined) { // not found
      return "no match";
    } else {
      return colors[target_color];
    }
  } // end getColor function


}) // end ready function

</script>

Sorry, I'm new to this so I'm not sure what to do exactly now.

Here is my entire code: http://pastebin.com/HEB3TWZP

Thanks in advance!

Upvotes: 1

Views: 90

Answers (1)

Jack
Jack

Reputation: 8941

You don't need to concatenate #. this is the current element in the iteration.

Also you might want to do something like var $this = $(this); Cleans up your code and you aren't recreating the jQuery object over and over again within the same iteration.

Upvotes: 1

Related Questions