CODEWITHSUNDEEP
javascripthtmlcss
gVidal
gVidal

Reputation: 335

javascript class check

This is a little hard to explain but I'll try my best. I have a bunch of links

<li><a class="various fade "  href="FOOTWEAR_SUB_PAGES/NIKE_SNOW.html"> <img src="MAIN_IMAGES/ZOOM_FORCE_2.jpg" border="0"/></a></li>                   
<li><a class="various1 fade " href="FOOTWEAR_SUB_PAGES/MERCURIAL_SUPERFLY.html"><img src="MAIN_IMAGES/MERCURIAL_SUPERFLY-2.jpg"  border="0" /></a></li>
<li><a class="various2 fade " href="FOOTWEAR_SUB_PAGES/AIRMAX_MOTO.html"><img src="MAIN_IMAGES/AIRMX-2.jpg"  border="0"  /></a></li>
<li><a class="various3 fade "  href="FOOTWEAR_SUB_PAGES/le-coq-joakim-noah.html"><img src="MAIN_IMAGES/JOAKIM-NOAH-3.jpg" border="0"  /></a></li>  
<li><a class="various4 fade "  href="FOOTWEAR_SUB_PAGES/NIKE_BMX.html"><img src="MAIN_IMAGES/GYZIRO-3.jpg"  border="0"  /></a></li>

and another set of links

<a class="ex1 various" href="FOOTWEAR_SUB_PAGES/NIKE_SNOW.html">ZOOM FORCE ONE ///</a>            
<a class="ex1 various1" href="FOOTWEAR_SUB_PAGES/MERCURIAL_SUPERFLY.html">MERCURIAL SUPERFLY ///</a> 
<a class="ex1 various2" href="FOOTWEAR_SUB_PAGES/AIRMAX_MOTO.html">AIRMX MOTO BOOT ///</a> 
<a class="ex1 various3" href="FOOTWEAR_SUB_PAGES/le-coq-joakim-noah.html">JOAKIM NOAH ///</a> 
<a class="ex1 various4" href="FOOTWEAR_SUB_PAGES/NIKE_BMX.html">DUNK GYRIZO</a>

now when someone clicks any of these links this js is called. 

$(document).ready(function () {

$("ul#gallery li a").each(function (i, item) {         
    var url = $(item).attr("href");           
    var links = $("a.ex1.various");            
    var link = $(links.parent().find("a[href='" + url + "']"));            
    var redclass = "showing-in-gallery";           
    var gallery = $("#gallery");           
    var scroll = function () {

        link.addClass(redclass);               
        gallery.animate({ left: -1 * $(item).position().left }, 1500);           
        gallery.css("width", gallery.width() + 640 + "px");               
        $(item).parent().after('<li id="gallery_spacer" style="width: 640px;"></li>');

                imageIndex = $(".ex1").index($(this));              
                imageIndex = $(".fade").index($(this));


        setGalleryLinks();

    };

    $(this).bind("click", scroll);     
    link.bind("click", scroll);
});

How can I check to see if .ex1 or .fade were clicked? such as 

    if (ex1 clicked){   
        imageIndex = $(".ex1").index($(this));}
    if (fade clicked){          
        imageIndex = $(".fade").index($(this));}

any help would be a life saver I've been spending days on this.

Upvotes: 0

Views: 117

Answers (3)

asgoth
asgoth

Reputation: 35829

You use the event's target:

$('.ex,.fade').on('click', function(e) {
   var target = $(e.target);

   // do sth with target
});

Upvotes: 1

user1931103
user1931103

Reputation:

Use the jQuery hasClass method.

http://api.jquery.com/hasClass/

if($(this).hasClass('ex1'))
    // An ex1 link was clicked
else if($(this).hasClass('fade')
    // A fade link was clicked
else
    // An unknown link was clicked

Upvotes: 3

gdoron
gdoron

Reputation: 150253

Use this:

if ($(e.target).hasClass('fade'))
    // something
else
    // something else

Add the event parameter to scroll function:

var scroll = function (e) {

Upvotes: 4

Related Questions