jQuery click function affecting multiple divs

Question

I'm trying to use jQuery's click function to apply a hover state to a selected div, without differentiating the div's in the JavaScript. I'm currently using:

 $(document).ready(function(){
    $(".project").click(function() {
            $("a.expand").removeClass("hovered");
            $("a.expand").addClass("hovered");
            $(".project_full").hide();
            var selected_tab = $(this).find("a").attr("href");
            $(selected_tab).fadeIn();
            return false;
        });

With the HTML:

<div class="project first project_gizmoscoop">
  <div class="title">
     GizmoScoop!                    
     <div class="date">2012</div>
  </div>
  <a class="expand" title="(Caption)" href="#project_1">GizmoScoop!</a>
</div>
<div class="project project_sc">
  <div class="title">
     Striking Code                  
     <div class="date">2011</div>
  </div>
  <a class="expand" title="(Caption)" href="#project_2">Striking Code</a>
</div>

The .hovered class is applied to the clicked link (specific styles from an external CSS file). However, everything is being chosen. (See http://www.codeisdna.com for an example).

I know what I'm doing wrong (I should be specifying the individual ID's or using HTML5 data attributes), but I'm stuck unnecessarily. I feel like a complete newb right now, that I can't do something this simple (although I've done more advanced stuff).

You're both adding and removing the same class (.hovered) in your example code, by the way. — isherwood
– isherwood, Commented Mar 13, 2013 at 19:04

isherwood · Accepted Answer · 2013-03-13 19:02:23Z

2

You simply need to take advantage of jQuery's flexibility (and good programming practice) and reduce your scope accordingly. You're already doing something similar with your variable definition. For example, to target only those a.expand elements inside the instance of .project that's clicked:

$(".project").click(function() {
    $(this).find("a.expand").removeClass("hovered");
    ...
});

answered Mar 13, 2013 at 19:02

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1998102 Over a year ago

You're right! I applied $(this) to the action of adding the class (kept .removeClass as it was) and everything works great! I knew it was something small, but I just couldn't think of this! Thanks!

pussmun · Accepted Answer · 2013-03-13 19:09:27Z

0

$(".expand").click(function() {
        $(this).addClass("hovered");
        ..
    });

answered Mar 13, 2013 at 19:09

pussmun

1431 gold badge2 silver badges12 bronze badges

1 Comment

user1998102 Over a year ago

The code didn't work too well for me! It applied each individually, but following isherwood's example provided a cleaner way for me to disable the clicks (and keep the tabs intact).

Collectives™ on Stack Overflow

jQuery click function affecting multiple divs

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related