Jquery Help!!

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
shogemuk
Forum Newbie
Posts: 4
Joined: Mon Aug 22, 2011 2:28 am

Jquery Help!!

Post by shogemuk »

Hi Guys,
I found this JQuery function that I would like to modify for use in my website, the problem is I am no good at Jquery, can someone please help.

Code: Select all

    $(function() {
        $('#baskethide').change(function(){
            $('.colors').hide();
            $('#' + $(this).val()).show();
        });
    });

Code: Select all

<Select id="baskethide">
   <option value="1">Red</option>
   <option value="2">Yellow</option>
   <option value="1">Blue</option>
</Select>
<div id="1" class="colors" style="display:none"> red... </div>
<div id="2" class="colors" style="display:none"> yellow.. </div>
<div id="1" class="colors" style="display:none"> blue.. </div>

The first issue is I would like to have it show a div only if the id/values is 1, if it is another figure then I would like it to show another div, is this possible?
Also is there a way to get it to load on entry to the page??

Thanks a lot in advanced.


pickle | Please use [ syntax=php ], [ syntax=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Jquery Help!!

Post by pickle »

First thing I noticed is you've got 2 divs with the id of "1". IDs need to be unique. I also think ids can't start with a number.

Inside your change function, you can put a condition in:

Code: Select all

$('#baskethide').change(function(){
  $('.colors').hide();
  if($(this).val() == 1)
    $("#1").show();
  else
    $("some other div").show();
});
What do you want to load on page load? If you want one of those divs visible, just remove the styling that sets the display to none.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
KCAstroTech
Forum Commoner
Posts: 33
Joined: Sat Aug 27, 2011 11:16 pm

Re: Jquery Help!!

Post by KCAstroTech »

Another thing to note is that if you have two divs that you want to call on at the same time you can add an additional class by simply adding a space followed by the class name, then use the the jQuery class selector the period (.) to specify the target(s):

Code: Select all

$('#baskethide').change(function(){
  $('.colors').hide();
  if($(this).val() == 1)
    $(".color_1").show();
  else
    $("some other div").show();
});

Code: Select all

<Select id="baskethide">
   <option value="1">Red</option>
   <option value="2">Yellow</option>
   <option value="1">Blue</option>
</Select>
<div id="red_div" class="colors color_1" style="display:none"> red... </div>
<div id="yellow_div" class="colors color_2" style="display:none"> yellow.. </div>
<div id="blue_div" class="colors color_2" style="display:none"> blue.. </div>
Alternatively you can also have more than one selector by separating them with a comma like so:

Code: Select all

$('#baskethide').change(function(){
  $('.colors').hide();
  if($(this).val() == 1)
    $("#red_div, #blue_div").show();
  else
    $("some other div").show();
});
shogemuk wrote:Also is there a way to get it to load on entry to the page??
Could you please expand on what you mean by this. I am not sure if you are wanting the script to load on start or to have it show a div on start.
Post Reply