Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 214
  • Last Modified:

jQuery find matched class

Hello Experts,

This should be fairly simple, I hope.
I have a nav-menu on a page and few photos. I included the same classes for both so it can be easily matched.
What I am trying to do is... when you mouse-over the the menu link with a class of "artist" the photo with the same class will highlight (by adding an active class to it). and vise verse.


// the menu //

<ul>
  <li><a href="" class="link artist">Artist</a></li>
  <li><a href="" class="link dog">Dog</a></li>
</ul>

// the photos //

<a href="" class="photo1 artist"><img src="image1.jpg" alt=""></a>
<a href="" class="photo2 dog"><img src="image2.jpg" alt=""></a>

Open in new window

0
Refael
Asked:
Refael
2 Solutions
 
RobOwner (Aidellio)Commented:
Here is your demo: http://jsbin.com/sedori/1/edit?html,css,js,output

$(function() {
	$('li a').hover(function() {
		//in
		var mytype = $(this).data('type');
		$('.photo.'+mytype).addClass('active');
	},
					function() {
		//out
		var mytype = $(this).data('type');
		$('.photo.'+mytype).removeClass('active');
	}
				   );
});

Open in new window


I changed a couple of things.  Firstly, changed the class photo[X] to just photo.  Secondly, I'm utilising the data attribute to store the data, rather than in the class.  This is a cleaner way to do it.
0
 
leakim971PluritechnicianCommented:
Test page : http://jsfiddle.net/2xh4h8t4/

$("ul a.link").hover(function() {
    var myclass = $.trim($(this).attr("class").replace("link",""));
    $("."+myclass+"[class^=photo]").show();    
}, 
function() {
    var myclass = $.trim($(this).attr("class").replace("link",""));
    $("."+myclass+"[class^=photo]").hide();    
});

Open in new window

0
 
RefaelAuthor Commented:
Rob Jurd and leakim971, Thank you so much!

I tried both solutions and both works just great :-) Thank you both for such a quick reply!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now