Updating multiple classes with JQuery?

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

Updating multiple classes with JQuery?

lindsaygelle1
Hey guys. I'm in a bit of a situation,

I'm trying to use a selector to load new content without reloading my entire web page.
While my current code works in reloading the information on a single div class, it doesn't work when I try and do it for multiple.

Below is the code that works for updating only one div class


$(function() {    

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

});

Here is the selector that lets users pick the content they wish to load:

 <Select id="Optionselector">
        <option value="Opt1" selected="true">Option 1</option>
        <option value="Opt2">Option 2</option>
      </Select>

These are the divs that are swapped around depending on the option users pick:

<div id="Opt1" class="Option" style="display:none"> 
       
       
        <div id="NEWDIV1" >
</div


<div id="Opt2" class="Option" style="display:none"> 
       
       
        <div id="NEWDIV2" >
</div



What I would like to do is something like this:


$(function() {    

    $('#Optionselector').change(function(){
        $('.Option' + '.RSSfeed').hide();
        $('#' + $(this).val()).show();
    });

});


(Here is the div class that I want to have updated)

<div class="RSSfeed">
<div id="RSSarea1">Feed goes here </div>
        </div>

<div class="RSSfeed" style="display:none">
<div id="RSSarea2">Feed goes here </div>
        </div>



Is anyone able to help me out with this?


Thanks to everyone who replies :D!
Reply | Threaded
Open this post in threaded view
|

Re: Updating multiple classes with JQuery?

Ridima

lindsaygelle1 wrote
Hey guys. I'm in a bit of a situation,

I'm trying to use a selector to load new content without reloading my entire web page.
While my current code works in reloading the information on a single div class, it doesn't work when I try and do it for multiple.

Below is the code that works for updating only one div class


$(function() {    

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

});

Here is the selector that lets users pick the content they wish to load:

 <Select id="Optionselector">
        <option value="Opt1" selected="true">Option 1</option>
        <option value="Opt2">Option 2</option>
      </Select>

These are the divs that are swapped around depending on the option users pick:

<div id="Opt1" class="Option" style="display:none"> 
       
       
        <div id="NEWDIV1" >
</div


<div id="Opt2" class="Option" style="display:none"> 
       
       
        <div id="NEWDIV2" >
</div



What I would like to do is something like this:


$(function() {    

    $('#Optionselector').change(function(){
        $('.Option' + '.RSSfeed').hide();
        $('#' + $(this).val()).show();
    });

});


(Here is the div class that I want to have updated)

<div class="RSSfeed">
<div id="RSSarea1">Feed goes here </div>
        </div>

<div class="RSSfeed" style="display:none">
<div id="RSSarea2">Feed goes here </div>
        </div>



Is anyone able to help me out with this?


Thanks to everyone who replies :D!


Thanks for the thread, i learn something new from your thread about JQuery.