JQuery load multiple div classes issue

  • (3 Pages)
  • +
  • 1
  • 2
  • 3

31 Replies - 23223 Views - Last Post: 09 July 2011 - 01:37 AM

#31 japanir   User is offline

  • jaVanir
  • member icon

Reputation: 1014
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: JQuery load multiple div classes issue

Posted 07 July 2011 - 09:51 AM

ah sorry for that.
in the change function,
var color = $(this).val();

should be
color = $(this).val();


as we use it as a global variable.
Was This Post Helpful? 0
  • +
  • -

#32 lindsaygelle   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 29-June 11

Re: JQuery load multiple div classes issue

Posted 09 July 2011 - 01:37 AM

Hi Java.

I've had no success; the div boxes are hidden at least but the call to swap and display does not work D:

<!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=UTF-8" />
<title>Loading Multiple classes</title>
</head>
<style type='text/css'>
09 #colorBox {
width:50px;
height:50px;

}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
var color = '';
$('#blue').hide();
$('#red').hide();
$('#green').hide();
$('#TextGreen').hide();
$('#TextRed').hide();
$('#TextBlue').hide();



$('#colors').change(function(){
$('#' + color).hide();
$('#' + color + 'Text').hide();
color = $(this).val();
$('#' + color).show();
$('#' + color + 'text').show();
});
});
</script>



</head>
<body>
<select id='colors'>
  
<option value='blue' selected="selected">Blue</option>
  	  
<option value='green'>Green</option>
  
	  
<option value='red'>Red</option>
  

</select>
<div id="ColourContainer" > 
  <div id='blue' class="blueClass"> THIS IS BLUEEE </div>
  <!-- I want this to be displayed when the blue option is selected; hidden when other options chosen --> 
   <div id='red' class="RedClass" style="display:none;"> This is REEEED </div>
  <!-- I want this to be displayed when the red option is selected, hidden when other options chosen --> 
  <div id='green' class="GreenClass" style="display:none;"> This is green'</div>
  <!-- I want this to be displayed when the green option is selected, hidden when other options chosen --> 
  </div>
<div id="TextColourContainer">  
  
  <div id='TextBlue' class="blueClass">The Colour blue is a primay colour</div>
  <!-- I want this to be displayed when the blue option is selected, hidden when other options selected --> 
  
  <div id='TextRed' class="redClass" style="display:none;">The Colour Red is also a primary colour</div>
  <!-- I want this to be displayed when the red option is selected,  hidden when other options selected -->
  
  <div id='TextGreen' class="greenClass" style="display:none;">The Colour Green is another primary colour</div>
  <!-- I want this to be displayed when the green option is selected,  hidden when other options selected --> 
</div>
</body>
</html>


What is wrong? I figured that the code here makes sense but whyt won't it work?
Was This Post Helpful? 0
  • +
  • -
  • (3 Pages)
  • +
  • 1
  • 2
  • 3