Bug Tracker

#4837 closed bug (invalid)

Opened July 01, 2009 11:35AM UTC

Closed July 02, 2009 01:16AM UTC

Last modified March 15, 2012 04:07PM UTC

ToggleClass Bug

Reported by: vectorman Owned by:
Priority: critical Milestone: 1.3.1
Component: unfiled Version: 1.3.1
Keywords: toogleclass bug Cc:
Blocked by: Blocking:
Description

hi, there is problem with toogleclass i have 3 div in my page. and i have 3 clases for toggleclass. my class names are s1,s2,s3 i have simple hover and click fuction first div working and it's class name is s1 but the same code second div doesnt work. there is animate code with toogle class 2nd div no problem with animate but toggleclass doesnt work.

you can see sample

http://www.logmania.com/jk/bug.asp

my codes.

<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" "http:www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Jquery Toggle Class Bug</title>

<script type="text/javascript" src="jquery-1.3.1.js"></script>

<script type="text/javascript">

<!--

$(document).ready(function(){

$("div#oy div").hover(function () {

var ad= $(this).attr("id").replace("sa","");

$(this).toggleClass('s2');

$(this).animate({opacity: "0.5"});

},function(){

var ad= $(this).attr("id").replace("sa","");

$(this).toggleClass('s2');

$(this).animate({opacity: "1"});

}).click(function(){

var ad= $(this).attr("id").replace("sa","");

$(this).attr("class", "s1");

$(this).toggleClass('s3');

});

});

//-->

</script>

<style type="text/css">

<!--

body,td,th {

font-family: Arial, Helvetica, sans-serif;

font-size: 9px;

color: #333333;

}

.s1

{

width:50px;

margin:2px;

height:50px;

float:left;

cursor:pointer;

background-repeat:no-repeat;

background-color:#999999;

}

.s2

{

width:50px;

margin:2px;

height:50px;

float:left;

cursor:pointer;

background-repeat:no-repeat;

background-color:#3399CC;

}

.s3

{

width:50px;

margin:2px;

height:50px;

float:left;

cursor:pointer;

background-repeat:no-repeat;

background-color:#FFCC00;

}

#oy

{

width:155px;

margin:2px;

height:55px;

float:left;

}

#sonuc

{

width:155px;

margin:2px;

height:55px;

float:left;

}

.style2 {font-size: 24px}

-->

</style>

</head>

<body>

<div id="oy">

<div class="s1" id="sa1"></div>

<div class="s3" id="sa2"></div>

<div class="s1" id="sa3"></div>

</div>

</body>

</html>

Attachments (2)
  • bug.asp (1.8 KB) - added by vectorman July 01, 2009 11:36AM UTC.

    toggleclass bug file

  • jquery-1.3.1.js (114.7 KB) - added by vectorman July 01, 2009 11:36AM UTC.

    1.3.1

Change History (1)

Changed July 02, 2009 01:16AM UTC by dmethvin comment:1

resolution: → invalid
status: new → closed

Basic code, reformatted

$("div#oy div")
 .hover(
  function () {
   $(this).toggleClass('s2'); 
   $(this).animate({opacity: "0.5"});
  },
  function(){
   $(this).toggleClass('s2');
   $(this).animate({opacity: "1"});
  })
 .click(function(){
   $(this).attr("class", "s1");
   $(this).toggleClass('s3');
 });

I don't know what your expected behavior was, but as far as I can tell this is working as the code is written. The hover is toggling the s2 class. When you click one of the boxes, it *assigns* class="s1" (removing s2) and the toggleClass('s3') always *adds* s3 as a result. Take a look at the HTML with Firebug to see what is going on.