Jump to content

Jquery REMOVE CLASS's STARTING WITH


Recommended Posts

Hi guys i'm prob going about this the wrong way but this is what i have so farThe 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.
Link to post
Share on other sites

I don't use much jQuery, but I don't think it has a way to do that automatically. You would need to get the class string, split it up to get each individual class name, and loop through them and test each one to see if you want to remove it. If you pass the class name to removeClass it will remove only that class instead of all of them.

Link to post
Share on other sites

Overcomplicating this! You have the checked inputs to go by? just join the checked values together to give classes separated by space

$(function() {  $('[name=Border]').click(function() {         //var classy = $(this).val();   $('#regdisplay').removeClass();   $('#regdisplay').addClass($('[name=Font]:checked').val()+" "+$(this).val() );   /* if($(this).is(':checked'))  {        $('#regdisplay').addClass(classy);   }*/ });  $('[name=Font]').click(function() {         //var fonty = $(this).val();          $('#regdisplay').removeClass();    $('#regdisplay').addClass($('[name=Border]:checked').val()+" "+$(this).val() );   /* if($(this).is(':checked'))  {        $('#regdisplay').addClass(fonty);   }*/ });});
Link to post
Share on other sites

THIS removes all but NOT the currently opposing selected border or font class depending which is selected at time

$(function() {  $('[name=Border]').click(function() {      $('#regdisplay').not($('#regdisplay').attr('class', $('[name=Font]:checked').val())).removeClass();        $('#regdisplay').addClass($(this).val()); });  $('[name=Font]').click(function() {      $('#regdisplay').not($('#regdisplay').attr('class', $('[name=Border]:checked').val())).removeClass();        $('#regdisplay').addClass($(this).val()); });});
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...