jQuery How do I pass variables that change according to class?

JasonSims · 05-13-2011, 02:43 AM

I have an image gallery that I am building a basic shopping cart for. Basically what I want to accomplish is to pass the value of the image src of the currently selected image to a hidden field and also display this image that is currently selected in the image gallery in the add cart window.

The images are pulled via PHP from a directory.

Hopefully that's not too muddled to understand.

harbingerOTV · 05-13-2011, 02:55 PM

Try this out and see if it's close.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>...</title>
<style type="text/css">

h3 {
margin: 0 0 5px 0;
padding: 0;
font: normal 12px/1 arial, sans-serif;
}

#selection, #cart, #yourForm {
border: 1px solid #333;
padding: 12px;
background: #eee;
margin: 0 0 20px 0;
}

#selection img, #cart #gallery img {
border: 1px solid #333;
margin: 4px;
}

#yourForm input {
width: 90%;
display: block;
}

</style>
</head>
<body>

<div id="selection">
	<h3>Add items to your cart</h3>
	<img src="http://farm4.static.flickr.com/3145/2431401727_df3c94bf02_t.jpg" alt="" />
	<img src="http://farm1.static.flickr.com/78/176018244_f82e7d5e3b_t.jpg" alt="" />
	<img src="http://farm3.static.flickr.com/2167/2460883152_49954f0961_t.jpg" alt="" />
    <img src="http://farm3.static.flickr.com/2237/2224586968_5270d5725f_t.jpg" alt="" />
    <img src="http://farm3.static.flickr.com/2707/4351045597_0a38f961ca_t.jpg" alt="" />
</div>

<div id="cart">
	<h3>Items in your cart</h3>
	<div id="gallery"></div>
</div>

<form name="yourForm" id="yourForm" action="" method="post">
	<h3>This for will be hidden but it's not to show you the inputs are being added</h3>
	<div>
	</div>
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#selection img').live('click', function(){
		var thisSrc = $(this).attr('src');
		$(this).fadeOut(400, function(){ 
			$(this).remove();
			$('#cart #gallery').append('<img src="'+thisSrc+'" alt="" />');
			$('#yourForm div').append('<input type="text" value="'+thisSrc+'" />'); 
		});
	});
	$('#cart #gallery img').live('click', function(){
		var thisSrc = $(this).attr('src');
		$(this).fadeOut(400, function(){ 
			$(this).remove();
			$('#yourForm div input').each(function(){
				if($(this).val() == thisSrc){
					$(this).remove();
				}
			}); 
		});
		$('#selection').append('<img src="'+thisSrc+'" />');
	});
});
</script>
</body>
</html>

JasonSims · 05-14-2011, 05:41 PM

That code works amazingly! I was able to change a few thing to fit the specifics and it works! Thank you so much for your help.