#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 11 years ago by
| Component: | unfiled → effects |
|---|---|
| Owner: | set to activex88 |
| Priority: | undecided → low |
| Status: | new → pending |
comment:2 Changed 11 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 11 years ago by
Test case on reproduces http://jsfiddle.net the case shown below:
Thanks.
comment:4 follow-up: 5 Changed 11 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 11 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 11 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.