Ticket #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: | ||
| Blocking: | Blocked by: |
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
comment:1 follow-up: ↓ 2 Changed 2 years ago by timmywil
- Owner set to activex88
- Priority changed from undecided to low
- Status changed from new to pending
- Component changed from unfiled to effects
comment:2 in reply to: ↑ 1 Changed 2 years ago by activex88
- Status changed from pending to 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 2 years ago by activex88
Test case on reproduces http://jsfiddle.net the case shown below:
Thanks.
comment:4 follow-up: ↓ 5 Changed 2 years ago by dmethvin
- Status changed from new to 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 in reply to: ↑ 4 Changed 23 months ago by anonymous
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 23 months ago by timmywil
- Status changed from pending to closed
- Resolution set to invalid
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/
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
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.