toggleClass failed on element with id set.

Reported by:	activex88	Owned by:	activex88
Priority:	low	Milestone:	1.next
Component:	effects	Version:	1.6.1
Keywords:		Cc:
Blocked by:		Blocking:

Description

When test toggleClass function on elements with id defined, it failed.

A simple example would be as,

An external style sheet "toggleClass.css" defined as:

body
{
    background: black;
}

div#left
{
background: gold; 
border: 1px solid #AAA; 
width: 80px; 
height: 80px; 
margin: 0 5px; 
float:left
}

div#center
{
background: gold; 
border: 1px solid #AAA; 
width: 80px; 
height: 80px; 
margin: 0 5px; 
float:left
}

div#right
{
background: gold; 
border: 1px solid #AAA; 
width: 80px; 
height: 80px; 
margin: 0 5px; 
float:left
}

.colored
{
background: green;
}

p
{
color: Blue;
font-size: 2.5em;
}

.highlight 
{ 
background:orange; 
}

Html document ("toggleClass.html"):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>toggleClass Demo</title>
    <link href="toggleClass.css" rel="Stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery-1.3.1.js"></script>
    <script type="text/javascript" src="toggleClass.js"></script>
</head>
<body>
<p id="results">Results show here.</p>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
<button id="run">Animation</button>
</body>
</html>

a javascript file "toggleClass.js":

$(document).ready(function () {

    $("#run").click(function () {
        $("#center").toggleClass("highlight");
        $("p").html($("#center").css("background-color"));
    });

    function AnimateDiv() {
        $("#center").slideToggle("slow", AnimateDiv);
    }

    $("p").click(function () {
        $(this).toggleClass("highlight");
    });

    AnimateDiv();
});

Attachments (0)

Change History (6)

Changed June 21, 2011 10:22PM UTC by timmywil comment:1

component:	unfiled → effects
owner:	→ activex88
priority:	undecided → low
status:	new → pending

Thanks for taking the time to contribute to the jQuery project! Please provide a reduced test case on http://jsfiddle.net that reproduces the issue experienced to help us assess your ticket.

Additionally, test against the jQuery (edge) version to ensure the issue still exists.

Changed June 21, 2011 11:11PM UTC by activex88 comment:2

status:	pending → new

Replying to [comment:1 timmywil]:

Thanks for taking the time to contribute to the jQuery project! Please provide a reduced test case on http://jsfiddle.net that reproduces the issue experienced to help us assess your ticket. Additionally, test against the jQuery (edge) version to ensure the issue still exists.

Thanks for your comments.

A reduced test case has been verified at http://jsfiddle.net, and the result was consistent with the experienced issue. The tests were against jQuery (edge) version, 1.2.6 to 1.6.1, all versions were verified that the issue persists as described.

Changed June 22, 2011 01:00AM UTC by activex88 comment:3

Test case on reproduces http://jsfiddle.net the case shown below:

http://jsfiddle.net/gEvVf/

Thanks.

Changed June 23, 2011 11:12PM UTC by dmethvin comment:4

status:	new → pending

Sorry, but there is a lot going on there. Can it be reduced further? What exactly is the expected vs. actual behavior? I don't see that explained above or in the test case.

Changed June 30, 2011 02:13AM UTC by anonymous comment:5

Replying to [comment:4 dmethvin]:

Sorry, but there is a lot going on there. Can it be reduced further? What exactly is the expected vs. actual behavior? I don't see that explained above or in the test case.

I have modified the sample codes to simplify the test case. The issue is:

if a div element is declared with id, e.g. "id='center'" in this case. When a toggleClass is called, the div element with the specified id does not get set the toggled class. Please see the sample code at:

http://jsfiddle.net/gEvVf/7/

Changed June 30, 2011 01:40PM UTC by timmywil comment:6

resolution:	→ invalid
status:	pending → closed

CSS rules with ids receive more precedence than those with classes. If your highlight styles are made !important, you will see everything works fine: http://jsfiddle.net/timmywil/gEvVf/12/

Side navigation

#9641 closed bug (invalid)