Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help setting a toggleClass on a parent div

    Hey all!
    I need help setting a toggleClass on a parent div of an anchor tag, the same anchor tag will call either an onClick or .click function and needs to set the toggleClass on the parent div, but only on the anchor tag that is clicked.

    Here is some code...

    HTML - The div with the class "opg-link" will have the javascript function call on it (currently activeBioImg(), and the parent div classed "opg-image", needs to have the toggleClass('classname') added to it.

    Code:
    <div id="op-gallery">
        <div class="loader"><img height="11" width="16" align="absmiddle" class="load" src="../imgs/loader.gif" style="display: none;"></div>
        <div class="opg-container">
            <div style="background-image: url(bio-images/someimage.jpg);" class="opg-image">
                <a onclick="javascript:loadBio('bio1');javascript:activeBioImg();" class="opg-link" title="Name" href="#"></a>
            </div>
            <div class="opg-name">Some name</div>
        </div>
        <div class="opg-container">
            <div style="background-image: url(bio-images/someimage.jpg);" class="opg-image">
                <a onclick="javascript:loadBio('bio2');javascript:activeBioImg();" class="opg-link" title="Name" href="#"></a>
            </div>
            <div class="opg-name">Some name</div>
        </div>
    A couple things I've tried so far.
    Code:
    function activeBioImg() {
    	$('a.opg-link').each(function () {
    		$('this').parent().toggleClass('bio-active-img');
    	});
    }
    and

    Code:
    $('a.opg-link').parent().toggleClass('bio-active-img');
    Which works... except it does it on all divs (duh, because there is no way to distinguish between the clicked anchor and the other anchors)

    Any ideas? I've been stuck for hours, and it's probably something really simple.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    How about:

    Code:
    $('a.opg-link').click(function () {
    		$(this).parent().toggleClass('bio-active-img');
    	});
    Note it's $(this) not $('this').
    Last edited by SB65; 12-22-2010 at 03:40 PM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •