jQuery addClass() function in a Drupal site isn't working in IE7

I am trying to use jQuery in the context of a Drupal site. The script works fine in other browsers including IE8, but in IE7 it partially breaks down.

Sample script code:

function showEducation() {
   jQuery('#map-overlay').attr('class','').addClass('education');
   jQuery('#map-legend-image').attr('src','/sites/all/images/map/legend-education.png');
}

... is used to how or hide an overlay on a map image, as well as change the src image for a map legend:

<div id="map">
  <img id="map_image" src="[map path]" />
  <div id="m开发者_如何转开发ap-overlay"></div>
  <div id="map-legend">
    <img src="[legend path]" usemap="#map-legend-imageMap" id="map-legend-image" />
    <map name="map-legend-imageMap" id="map-legend-imageMap">
      <area shape="rect" coords="12,11,271,66" href="javascript:showEducation()" />
    </map>
  </div>
</div>

The legend updates when the appropriate area of the image map is clicked, but the overlay does not.

I have come across quite a few issues with addClass() in IE7, but none of the problems seemed quite the same, nor the solutions quite a propos.

jQuery('#map-overlay').attr('class','').addClass('education');//instead of this

use

jQuery('#map-overlay').removeClass().addClass('education');

removeClass() remove all classes from element.

I've never seen addClass() not work in IE7. Are you certain there is an issue between the two?

Can you use addClass() without chaining and see if it works? If that does not work, can you do something like .hide() to see if it hides your element? I'm trying to determine if jQuery('#map-overlay') is actually grabbing your element at the time this code is run, or not.

Generally, without an example there is no way we can even verify that this is an issue with addClass() and IE7. If the above does not help you debug, can you provide a jsfiddle link, and I'll test it on IE7?