#9641 closed bug (invalid)
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(); });
Change History (6)
comment:1 follow-up: 2 Changed 12 years ago by
Component: | unfiled → effects |
---|---|
Owner: | set to activex88 |
Priority: | undecided → low |
Status: | new → pending |
comment:2 Changed 12 years ago by
Status: | pending → new |
---|
Replying to 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.
comment:3 Changed 12 years ago by
Test case on reproduces http://jsfiddle.net the case shown below:
Thanks.
comment:4 follow-up: 5 Changed 12 years ago by
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.
comment:5 Changed 12 years ago by
Replying to 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:
comment:6 Changed 12 years ago by
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/
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.