jQuery Get Attribute Value even when it changes
<p>I have the following:</p>

<p><img src="http://i.stack.imgur.com/TahKM.png" alt="enter image description here"></p>

<p><strong>Javascript:</strong></p>

<pre><code>$(".bg .thumb_wrapper").click(function() {
    $(".bg .thumb_wrapper").removeClass("active");
    $(this).addClass("active");
});
</code></pre>

<p>So every time I click on a new background, it is highlighted and is given a class "active" and the previous active class is removed.</p>

<p>Now all I need to do is create a variable and set it to the data-name attribute for that active item.</p>

<p><strong>Here is the HTML:</strong></p>

<pre><code>&lt;div class="thumb_wrapper active"&gt;
    &lt;img src="images/backgrounds/thumb/bg2.jpg" data-name="bg2.jpg"&gt;
&lt;/div&gt;
</code></pre>

<p>So if I put it in the click function, it will work fine:</p>

<pre><code>var bg = $(".bg .thumb_wrapper.active img").attr("data-name");
console.log(bg);
</code></pre>

<p>so every time it is clicked, it tells me the value.  But I need to access that variable outside of that function.. so it needs to be global.</p>

<p>Is there anything I can do to grab the value of data-name on the start of the page, not on a click function?  And when I do click a new BG and the active class is updated, then the variable will be updated also?</p>

<p>Hope that makes sense.</p>

<p>Thanks!</p>
