CODEWITHSUNDEEP
jqueryhtmlcssdomtarget
Dave Rottino
Dave Rottino

Reputation: 1047

Targeting clicked div with jquery

I have this block of code where when I hover (click for purposes of this example though but ultimately hover) on a particular box I want to target that div with universal jQuery code. I want the image inside the div to hide and a new div to appear and animate the width to say 250px. Been trying to target the second class of the div but to no avail. Anyone have any thoughts?

    $(document).ready(function(){
        $('.partner_box').click(function() {
            var hidden_div;
            hidden_div = $(this).attr('class').eq(1);
            //hidden_div = $(hidden_div).eq(1).html();

            //hidden_div = hidden_div:nth-child(1);

            $(hidden_div + ' img').hide();
            console.log(hidden_div);

            //alert(hidden_div);
            //alert($(hidden_div).attr('class').split(' ')[1])

            /*$('.partner_box div').animate({
                top: '0px',
                right: '0px',
                bottom: '0px',
                left: '0px',
                display: 'block',
                position: 'absolute',
                width: '200px'
            });*/
        });
    });

    <div id="partner_grid">
        <!--LINE ONE-->
        <div class="partner_box partner_box1">
            <img src="images/partners/asx.jpg" alt="ASX" />
            <div style="display:none;">
                <p>This is the text for the slide.</p>
            </div>
        </div>
        <div class="partner_box partner_box2">
            <img src="images/partners/beauchamp.jpg" />
            <div style="display:none;">
                <p>This is the text for the slide.</p>
            </div>
        </div>
        <div class="partner_box partner_box3">
            <img src="images/partners/decillion_group.jpg" />
            <div style="display:none;">
                <p>This is the text for the slide.</p>
            </div>
        </div>
        <div class="partner_box partner_box4">
            <img src="images/partners/dtcc.jpg" />
            <div style="display:none;">
                <p>This is the text for the slide.</p>
            </div>
        </div>
    </div>

Upvotes: 1

Views: 169

Answers (4)

Dave Rottino
Dave Rottino

Reputation: 1047

I wasn't able to parse the classes effectively, so I just made unique ids for each slide.

$('.partner_box').click(function() {
    var hidden_div;
    hidden_div = $(this).attr('id');
});

Thanks for all the help though.

Upvotes: 0

ZapRowsdower910
ZapRowsdower910

Reputation: 3214

Remember when you're inside an event like this that the $(this) refers to the particular element clicked. Not all elements with the selector you're using.

Take a look at this JSFiddle: http://jsfiddle.net/ufomammut66/6y9XY/

If you click an element and check it out in console you'll notice I have it dumping out the $(this) element. In FireFox, if you have FireBug installed, mousing over the output will show the element $(this) refers to in that case. You should notice that the output element is particular to the clicked element.

From there you should be able to do whatever animations you need.

Upvotes: 0

Jared
Jared

Reputation: 12524

Hi I am not entirely sure of what you are trying to accomplish. Here is an example of hiding the child image and showing the child div

$(document).ready(function(){
        $('.partner_box').click(function() {

            var my_image = $(this).find("img");
            var hidden_div = $(this).find("div");

            my_image.hide();
            hidden_div.show();


        });
    });

The keyword "this" is tied to the element that triggered the event. So while you are attaching a click event handler to all divs with a class of .partner-box only the one that is clicked while generate the event.

Upvotes: 0

Code Maverick
Code Maverick

Reputation: 20415

Trying changing:

$(hidden_div + ' img').hide();

to:

$('.' + hidden_div + ' img').hide();

Since you are targeting a class, you need to preface the class with a period. That seems to be left out.

Upvotes: 1

Related Questions