current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have tried different approaches to get this to work. I know I have to wrap the function but can not get it to work. The function is running in a .js file.

http://jsfiddle.net/hookedonweb/yq8Hz/

function showLabel(labelName) {
   var labelImgs = jQuery(".content .packaging .labels img");
   var focusImg  = jQuery("#label_" + labelName);

   if (labelImgs.length > 0 && focusImg.length > 0) {
       labelImgs.each(function() { jQuery(this).removeClass("active"); });

       focusImg.addClass("active");
   }
}
share|improve this question
2  
Where is the php here? –  Daedalus Nov 3 '12 at 5:12
1  
Working fiddle for those curious. –  Daedalus Nov 3 '12 at 5:14
1  
what is your question?? –  Sibu Nov 3 '12 at 5:16
    
Given your function works.. the only things I can assume are that you are not including jquery in your page, and that your function is not in the document head. –  Daedalus Nov 3 '12 at 5:19

1 Answer 1

up vote 1 down vote

I think you may be confusing PHP and jQuery. Anyways, your code can be simplified a lot. This seems to do what you want. If it doesn't then you need to clarify your question.

http://jsfiddle.net/yq8Hz/3/

Don't use inline javascript. You are using jQuery, so use it to separate your code from your html. This is a good practice. You can use the data attributes to store the img you want to reference.

<div><a href="" data-label="macandcheese">See Label</a></div>
<div><a href="" data-label="lasagna">See Label</a></div>
<div><a href="" data-label="beefstroganoff">See Label</a></div>

Then use jQuery's hover to add/remove the active class. We make use of jQuery's data method to get the label we want.

$('a').hover( function() {
    $('img').removeClass('active');
    $('img#label_' +  $(this).data('label')).addClass('active');
});​
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.