Bug Tracker

Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#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 Changed 8 years ago by timmywil

Component: unfiled → effects
Owner: set to 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.

comment:2 in reply to:  1 Changed 8 years ago by activex88

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 8 years ago by activex88

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

​http://jsfiddle.net/gEvVf/

Thanks.

comment:4 Changed 8 years ago by dmethvin

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 in reply to:  4 Changed 8 years 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:

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

comment:6 Changed 8 years ago by timmywil

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/

Note: See TracTickets for help on using tickets.