How do I only target one instance of a class?

[nixnerd]

On its face, this seems like an EASY problem to solve. I’ve found that by using a combo of this and find, it’s possible to only target one instance of a class. But, my situation involves not interacting children but interacting cousins… if that makes sense.

Obviously, I need these cards to function independently.

The two elements in question have different parents who are siblings.

Here is my HTML:

<div class="card">
    <header>
        <h2>Modern townhome</h2>
        <p>The Highlands</p>
    </header>

    <div class="pinContainer"><svg class="pin" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="23.881px" height="32px" viewBox="0 0 23.881 32" enable-background="new 0 0 23.881 32" xml:space="preserve">
        <path d="M23.881,11.94c0-1.607-0.313-3.174-0.938-4.646C22.34,5.872,21.483,4.595,20.383,3.5
        c-1.102-1.102-2.369-1.956-3.797-2.562C15.106,0.314,13.553,0,11.939,0c-1.604,0-3.174,0.312-4.646,0.938
        C5.871,1.542,4.604,2.4,3.5,3.5C2.399,4.595,1.546,5.872,0.938,7.294C0.316,8.769,0,10.331,0,11.94c0,1.609,0.312,3.174,0.938,4.646
        c0.338,0.797,0.756,1.547,1.247,2.247l0,0l7.884,12c1.028,1.558,2.706,1.558,3.733,0l7.881-12l0,0
        c0.494-0.699,0.914-1.449,1.25-2.247C23.571,15.114,23.881,13.553,23.881,11.94z M15.088,15.089c-0.84,0.84-1.955,1.303-3.146,1.303
        c-1.188,0-2.312-0.463-3.146-1.303c-0.838-0.844-1.302-1.956-1.302-3.146c0-1.188,0.464-2.305,1.302-3.145
        c0.848-0.84,1.957-1.31,3.146-1.31c1.189,0,2.31,0.47,3.146,1.31c0.844,0.84,1.309,1.956,1.309,3.145
        C16.397,13.133,15.932,14.246,15.088,15.089z"/>
    </svg></div>

    <div class="container">
        <div class="content one active" style="background-image: url(images/pink.jpg)">

        </div>
        <div class="content two">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="content three">
            <blockquote>"Kristen is just amazing. We love our home and we love her."</blockquote>
            <p>-Mary Jo Soandso</p>
        </div>
        <div class="content four">
            <div class="grid">
                <div class="cell"><div class="photo" style="background-image: url(images/pink.jpg)"></div></div>
                <div class="cell"><div class="photo" style="background-image: url(images/teal.jpg)"></div></div>
                <div class="cell"><div class="photo" style="background-image: url(images/purple.jpg)"></div></div>
                <div class="cell"><div class="photo" style="background-image: url(images/yellow.jpg)"></div></div>
            </div>
        </div>

        <div class="content aux">
            <div id="googleMap"></div>
        </div>
    </div>
    <nav>
        <div class="button one active">
            <img class="icon" src="images/home.svg" alt="Home">
        </div>
        <div class="button two">
            <img class="icon" src="images/plus.svg" alt="More">
        </div>
        <div class="button three">
            <img class="icon" src="images/quote.svg" alt="Quote">
        </div>
        <div class="button four">
            <img class="icon" src="images/camera.svg" alt="Photos">
        </div>
    </nav>
</div>

Here is my jQuery:

$(document).ready(function () {




    $(".pinContainer").click(function () {  

        $(this).toggleClass("lit"); 
    });  


    $(".pinContainer").click(function () {  

        $(".content.aux").toggleClass("in");  
    }); 




    $(".button").click(function () {  

        $(".active").removeClass("active");  

        $(this).addClass("active");  
    });  


    $(".button").click(function () {  

        $(".content").removeClass("active");  

        $(".content.one").addClass("active");  
    }); 


    $(".button.two").click(function () {   
        $(".content").removeClass("active");  
        $(".content.two").addClass("active");  
    }); 

    $(".button.three").click(function () {  
        $(".content").removeClass("active");  
        $(".content.three").addClass("active");  
    }); 


    $(".button.four").click(function () {  
        $(".content").removeClass("active");  
        $(".content.four").addClass("active");  
    }); 

});

Here is the working (or should I say ‘not’ working?) demo:

http://joektempleton.com/test/kba/

[chrisburton]

Link might help here, Joe. Mind uploading this?

[__]

Since your event handlers all do basically the same thing, you could easily have only one (maybe two) on a common parent element instead of registering each one. That can really cut down on how much work there is to do. on supports this quite easily (read about “delegated events”).

[chrisburton]

Sorry about that! Completely missed the link. Give @traq’s suggestion a try but let us know if you need further help.

[__]

don’t have a common parent.

Well, I guess “ancestor” is a better term. …looks like div.grid is the closest. You could even use the document if you wanted to; events bubble that high.

nevermind

Actually, now that I’m looking closer (and hopefully, understanding better), you could attach the handler to your .cards. It would be easier, though, if you had a data-* attribute to tie each button directly to the content it controls.

demo

[__]

Just out of curiosity, did you pull this from the Github repo?

What repo? I could fix this up and make a pull request, if you think it’s worth it.

This is basically just a jQuery-plugin-like pattern: setting up a private scope to hold all the vars you’ll need, then iterating over each $ object and setting things up. I actually didn’t realize until halfway through writing that that setting the event listeners on the .card, and then delegating to the buttons, would automatically give each card its own “context.” Worked out pretty nice.

Do you still want comments?

I’m not usually particularly successful with javascript; I’m a php guy. But I’m trying, and I’ve been wrestling with require.js for a few days now, so I guess I’m “in the zone.”

Yeah, I didn’t notice the “pin.” Looks like you figured it out!

I always appreciate the help man. Thank you so much!

No problem at all. Happy to help.

1270 Replies created

F***, how many? geez, I need to get a life

[Author]

Posts