JQuery REMOVE CLASS's STARTING...

[Craig Hopson]

Hi guys i'm prob going about this the wrong way but this is what i have so far

 

The HTML

<div class="example">
    						<input type="radio" value="border-0" name="Border" id="text1" checked="checked"/>
    						No Border
    					</div>
    					
    					<div class="border-1 example">
   						<input type="radio" value="border-1" name="Border" id="text2" />
   						Single Line
   					</div>
   					
					<div class="border-2 example">
   						<input type="radio" value="border-2" name="Border" id="text3" />	
   						Double Line
   					</div>
   					
   					<div class="border-3 example">
   						<input type="radio" value="border-3" name="Border" id="text4" />
   						3D Line
   					</div>
   					

              <div class="font-1 example">
                            <input type="radio" value="font-1" name="Font" id="text1" checked="checked"/>
                            Normal Font
                        </div>
                        
                        <div class="font-2 example">
                           <input type="radio" value="font-2" name="Font" id="text2" />
                           Font 2
                       </div>
                       
                    <div class="font-3 example">
                           <input type="radio" value="font-3" name="Font" id="text3" />
                           Font 3
                       </div>
                       
                       <div class="font-4 example">
                           <input type="radio" value="font-4" name="Font" id="text4" />
                        Font 4
                       </div>
<span id="regdisplay" class="">HELLO</span>

The JS

$(function() {
  $('[name=Border]').click(function() {   
  	var classy = $(this).val();      
   $('#regdisplay').removeClass();
    if($(this).is(':checked'))  {
        $('#regdisplay').addClass(classy);
   }
 });
});

$(function() {
  $('[name=Font]').click(function() {   
  	var fonty = $(this).val();      
    $('#regdisplay').removeClass();
    if($(this).is(':checked'))  {
        $('#regdisplay').addClass(fonty);
   }
 });
});

The problem i have is once you selected the border and it has been applied to #regdisplay you then select a font but it will removeClass for the border.

 

What i was thinking was removeClass(border-????) or removeClass(font-????) but not shore how or maybe i'm going about this all wrong.

 

so help please.

 

P.S. Please excuse the formatting.

[Seahorsepip Veteran]

removeClass(classy) & removeClass(fonty)

And I would write this different lol

Just use :checked itself and if needed with the + or ~ selector in CSS