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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    419
    Thanks
    18
    Thanked 2 Times in 2 Posts

    function not taking $(this) variable

    Sorry to repost this, but I've tried a dozen different ways, and I don't understand why this won't work.

    I'm just trying to pass a variable to my function ( a series of if statements), but it's not working it seems. The function runs, but goes to the final if statement, saying it found nothing.

    I checked console, and assuming I did it right, I get no error.

    If I put the if statements back within the event handler, it works fine.

    I'm just not understanding what I could be doing wrong. I've looked at tutorials and it seems like I'm passing the variable right. And I've tried several ways with no luck.

    Here are some variations I tried with no success:
    pic_shift( $(this));
    pic_shift(this);
    pic_shift($this);

    I've tried these combined with:
    function pic_shift(){
    function pic_shift(this){
    function pic_shift($this){
    function pic_shift($(this)){

    no luck with any combination. This is above my head.

    code:
    Code:
    function pic_shift(){
    $("#testit").removeClass("main_page");
    if ( $(this).hasClass('active') ) {
    /* do stuff */
    } else if ( $(this).hasClass('one') || $(this).hasClass('ee')) {
    /* do other stuff */
    } else {
    alert('nothing');
    console.log($(this));
    };
    }
    $('.square-container,.main-nav,.reg3,.privacy_policy,.subnav').on('click', '.square','.main', function(event) {
    pic_shift( $(this));

    the html, if needed:

    Code:
    <div id="testit" class="main_page"></div>
    
    <div id="content" style="">
    	<div class="container">
    		<div class="header">
    			<div class="navbox">
    				
    				<ul class="main-nav">
    					<li><a href="#" class="main ee" id="link_nest">THadsfasdf</a></li>
    					<li><a href="#" class="main bb" id="link_hillcrest">asdf asdf</a></li>
    					<li><a href="#" class="main cc" id="link_3little">asdf asf dfghdg</a></li>
    					<li><a href="#" class="main dd" id="link_early">asdfasdf uytrd cbyge</a>
    						<ul id="sub-nav">
    							<li class="subnav"> <span class="subnav-separators">: :</span> </li>
    							<li class="subnav"><a href="#" class="main ff"id="link_rockport"> asdfhg </a></li>   
    							<li class="subnav"><span class="subnav-separators">|</span></li>  
    							<li class="subnav"><a href="#"class="main gg" id="link_ii_by_iv"> sdfhtrg</a></li>  
    							<li class="subnav"><span class="subnav-separators">|</span></li> 
    							<li class="subnav"><a href="#" class="main hh" id="link_raw"> asdf </a></li>
    						</ul>
    					</li>
    					<li>
    						<a href="#" class="main contact" id="link_contact">jhgfasfg</a>
    					</li>
    				</ul>
    			</div>
    	
    			<div class="logo-main">
    				<ul class="main-nav">
    					<li>
    						<a href="#" class="main aa"><img src="images/logo.png"></a>
    					</li>
    				</ul>
    			</div>
    		</div>
    		
    	
    	<div class="square-container" id="sq_fadein"> 
    	
    
    		<div class="square one" id="sq1" style="overflow:hidden;">
    			<div id="square_caption1" class="square_captions">jhgf jhgfds</div>
    			<div id="cf" style="overflow:hidden;height:100%;width:100%;">
    				<img class="bottom" style="width:100%;" src="images/1_color.jpg" id="pic_1">
    				<img class="top" style="width:100%;" src="images/1.jpg"  id="pic_1_color">
    			</div>			
    		</div>
    			
    				
    		</div>
    			
    
    			
    		<div class="square two" id="sq2" style="">
    			<div id="square_caption2" class="square_captions">asdfasdf</div>
    			<div id="cf" style="overflow:hidden;height:100%;width:100%;"">
    				<img class="bottom" style="height:120%;" src="images/2_color.jpg" id="pic_bw">
    				<img class="top" style="height:120%;" src="images/2.jpg" id="pic_color">
    			</div>
    
    		</div>
    		
    		<div class="square three" id="sq3" style="left-margin:20px;">
    			<div id="square_caption3" class="square_captions">asdfasdf</div>
    			<div id="cf" style="overflow:hidden;height:100%;width:100%;"">
    				<img class="bottom" style="width:100%;" src="images/3_color.jpg"  id="pic_3">
    				<img class="top" style="width:100%;" src="images/3.jpg"  id="pic_3_color">
    			</div>
    		</div>
    		
    		<div class="square four" id="sq4" style="">
    			<div id="square_caption4" class="square_captions">asdf asdf</div>
    			<div id="cf" style="overflow:hidden;height:100%;width:100%;"">
    				<img class="bottom" style="width:100%;" src="images/4_color.jpg"  id="pic_4">
    				<img class="top" style="width:100%;" src="images/4.jpg"  id="pic_4_color">
    			</div>
    		</div>
    		
    		<div class="home-register">
    			<p class="reg1">Tasdf</p>
    			<p class="reg2">asdfasdf</p>
    			<p class="reg3"><a href="#" class="main dd"><i>Click to kjnbvc</i></a></p>	
    			</div>
    		</div>
    		
    		<div class="details">
    			<h1>The text</h1>
    		
    			<div class="article">
    		&nbsp;
    
    			</div>
    	
    				
    		</div>
    
    	
    
    		<div class="foot-container"> 
    			<div class="foot-logo"><a href="http://www.x.net/" target="_new"><img src="images/logo-x.png" border="0"></a><br/>
    			</div>
    			
    			<div class="foot-nav" style="">
    			
    			<span class="privacy_policy"><a href="#" class="main privacy_link" id="link_privacy">asdf asdf</a></span> | <a href="http://x.com" target="_new">asdf</a> | <a href="#" id="music_control" class="">asdf asdf</a>
    			</div>
    			
    		</div>		
    	</div>
    </div>

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    on('click', '.square','.main', function(event
    I believe this to be incorrect (I don't know if jQuery can decipher it?) and should be:

    Code:
    on('click', '.square, .main', function(event
    There are several ways to get the correct context for 'this'. One way ignores the anonymous function and lets jQuery obtain the correct context. Here is a full example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Some Title</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>
    <script type="text/javascript">
    function testThis() {
        alert("You clicked " + this.id);
    }
    $(document).ready(function () {
        $(document).on('click', '.ps', testThis);
    });
    </script>
    </head>
    <body>
    <p id="firstOne" class="ps">The first paragraph</p>
    <p id="secondOne" class="ps">The second paragraph</p>
    <p id="thirdOne" class="ps">The third paragraph</p>
    </body>
    </html>
    I would also use 'e' rather than 'event' as there already exists an event object.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Rather than this the equivalent jQuery statement would be:

    Code:
    alert("You clicked " + $(this).attr('id'));
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    419
    Thanks
    18
    Thanked 2 Times in 2 Posts
    holy hell! That did it. Awesome, makes sense
    easy as that!

    One... two... five!


  •  

    Posting Permissions

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