JQuery Predicates - Attribute equals

This example uses JQuery attribute selector to add or remove a css class from an html element.

• Add JQuerify bookmarklet to this page. (Get JQuerify here)

Add following click handlers to page using console in FireBug

• $("#lnkRedAttributeEquals").click(showRed)
• $("#lnkYellowAttributeEquals").click(showYellow);

click me yellow
click me red

This is an html div element with an id="HelloGoodbyeAttributeEquals"

 

JQuery Predicate, id attribute equals
$("#HelloGoodbyeAttributeEquals").removeClass("YellowAttributeEquals").addClass("RedAttributeEquals"); 

or another syntax for an id attribute equals

$("[id='HelloGoodbyeAttributeEquals']").removeClass("YellowAttributeEquals").addClass("RedAttributeEquals"); 

or a div tag with an id equals

$("div[id='HelloGoodbyeAttributeEquals']").removeClass("YellowAttributeEquals").addClass("RedAttributeEquals"); 

function showRed(e) {
    e.preventDefault();
    $("[id='HelloGoodbyeAttributeEquals']").removeClass("YellowAttributeEquals")
                                           .addClass("RedAttributeEquals");
}

function showYellow(e) {
    e.preventDefault();
    $("#HelloGoodbyeAttributeEquals").removeClass("RedAttributeEquals")
                                     .addClass("YellowAttributeEquals"); 
}