function not taking $(this) variable

[turpentyne]

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:

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:

<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>

[AndrewGSW]

on('click', '.square','.main', function(event

I believe this to be incorrect (I don't know if jQuery can decipher it?) and should be:

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:

<!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.

[AndrewGSW]

Rather than this the equivalent jQuery statement would be:

alert("You clicked " + $(this).attr('id'));

[turpentyne]

holy hell! That did it. Awesome, makes sense
easy as that!

One... two... five!