CODEWITHSUNDEEP
jqueryhtml
user3606954
user3606954

Reputation: 1

JQuery - Select All Items With this Class

I am trying to make a piece of code re-usable on a mass scale without copy/pasting and changing the specific 'class' 350~ times.

This is the non-functional code that may give the idea of what I would like to do:

$(function(){ 
    var ClassName = $(this).attr('class');
    $(ClassName).each.hover(toggle); 
});
function toggle() {
   $(ClassName).toggleClass('hover');
}
$(function(){ 
    $(ClassName).mouseout(toggle); 
});
function toggle() {
   $(ClassName).toggleClass('hover');
}

This is the working code, but it only works on a SPECIFIC & GIVEN class:

$(function(){ 
    $('.specific-class').hover(toggle); 
});
function toggle() {
   $(".specific-class").toggleClass('hover');
}
$(function(){ 
    $('.specific-class').mouseout(toggle); 
});
function toggle() {
   $(".specific-class").toggleClass('hover');
}

If possible - I would like to match by first class only, or be able to exclude a class from the match check. Half of the elements will also have class "key" and the other half will have "map". The idea is that when you hover over either a key or a dot on the map - the other will also 'light up' with it to make it easier to find.

So, given four divs, one pair will be "div.spot1" with "div.spot1.key" and the other will be "div.spot2" with "div.spot2.key". ".key" needs to be excluded or else both spots on the Legend will have the hover effect applied. I only want to match for ".spot1" or ".spot2" for any given "spot#"

If this needs further clarification, let me know. It's 2am and I've been up all night trying to solve this.

Upvotes: 0

Views: 103

Answers (4)

javiercf
javiercf

Reputation: 811

With this snippet you can select the first class, so if you have multiple classes as you describe in your question it will only return the first class in the element (ie: spot1)

var ClassName = $(this).attr("class").split(" ")[0];

Upvotes: 0

Ishan Jain
Ishan Jain

Reputation: 8171

As you described in question : "it only works on a SPECIFIC & GIVEN class"

It's not your real problem, you not use jquery class selector for select element :

Try: to replace $(ClassName) with $("." + ClassName)

Explanation :

Your working code:

$('.specific-class').hover(toggle); 
// ^
// Here you use class selector, so it's working

Code Not Working :

var ClassName = $(this).attr('class');
// "ClassName" It's only contains the class name for example: "specific-class"

 $( ClassName).each.hover(toggle); 
// ^
// Here class selector is missing

Upvotes: 1

Manwal
Manwal

Reputation: 23836

Use 

$("." + ClassName)

insted of 

$(ClassName)

and You don't have to initialize two times toogle function.

This is corrected code:

$(function(){ 
    var ClassName = $(this).attr('class');//i don't know which object you are pointing here
    alert(ClassName);//this will give you undefined 
    $(ClassName).each.hover(toggle); 
    $(ClassName).mouseout(toggle); 
});
function toggle() {
   $(ClassName).toggleClass('hover');
}

Upvotes: 0

Rituraj ratan
Rituraj ratan

Reputation: 10388

change $(ClassName) with $("."+ClassName);

 $(function(){ 
     var ClassName = $(this).attr('class');
      $("."+ClassName).each.hover(toggle); 
   });
  function toggle() {
           $("."+ClassName).toggleClass('hover');
   }
       $(function(){ 
      $("."+ClassName).mouseout(toggle); 
   });
  function toggle() {
           $("."+ClassName).toggleClass('hover');
   }

Upvotes: 1

Related Questions