SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery add/remove class "when...."

    Hey all.

    I have a question regarding jQuery that I was hoping someone here could answer.

    I'm trying to add/remove classes from a element and am having trouble. The original class is being define like this:

    input[type="button"]{background-image:....}

    When I add the new class, the color of the text takes hold, but not the new background image.

    How do I remove a class defined like the one above? I tried removeClass(input) but it didn't work.

    Any ideas?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's not a class, that's an element type selector with an attribute selector.

    Define a class with the same visual characteristics and add/remove that:
    Code CSS:
    input[type="button"], .button {background-image:...}
    Code JavaScript:
    addClass("button");
    removeClass("button");

    Or, if you already have an input element, set its type property to button. Note that the type property is readonly once you've appended the element to a parent, though, so you need to set it first:
    Code JavaScript:
    var btn = document.createElement("input");
    btn.type = "button";
    btn.value = "Click Me";
    theParent.appendChild(btn);
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    $(function() {
    	$("input[type='button']").toggle(
    		function() { $(this).addClass("button"); },
    		function() { $(this).removeClass("button"); }
    	);
    });

    Code HTML4Strict:
    <div><input type="button" name="" value="" /></div>

    And how Tommy has shown as well.

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •