Question

I unfortunately do not have the choice of using a different browser.

I have the following code running against some HTML. The problem, I think, is line 4. Internet Explorer 7 doesn’t do anything at all when I click the row with id “yellowOne” (or any other row). If I take out .is('tr.grayheading') than IE opens all the rows with the yellowX class. However, I only want those that have both that yellowX class AND the grayheading class.

function showTheGray($yellowSection) {  
    $theYellowClass = 'yellow' + $yellowSection;
    if ($($theYellowClass).is(':hidden')) {       
        $($theYellowClass).is('tr.grayheading').show('normal');     
    }  else { $($theYellowClass).hide('normal'); }
} 

$(document).ready(  function() {    
    $('tr#yellowHeadOne').click(       
        function($e) {         
            showTheGray('One');       
        }     
    );    
    $('tr#yellowHeadTwo').click(       
        function($e) {         
            showTheGray('Two');       
        }     
    );    
    $('tr#yellowHeadThree').click(       
        function($e) {         
            showTheGray('Three');       
        }     
    );  
});

Does IE7 have problems with multiple classes being assigned an element? ie, class="yellowOne grayheading"
Have I written out my selectors wrong?

Does IE7 not like .is()? (I ask because the line $($theYellowClass).is(':hidden').show('normal') threw an error, hence my switching to the if block)

Answer 1

you got some other problems mate. your selector for yellow isn’t correct. try this code, putting your showthegrey function after document ready for best practices. generally, when you have a variable that starts with a $, that means it is a jquery element. I think changing some of your variable names might help you see whats going on more clearly. also, you should use “var” to declare your variables within the scope of that function. since you didn’t show your HTML, it isn’t clear if you have more than one “yellow” element which you want to be affected on the page or what you want to be affected, but I’m going to assume you just have one. also, I just realized I have no idea what you are trying to do.

also, when you use an id, you don’t need to narrow it down with something like tr in front of it, as this will actually slow down your selection. since ids are unique, you don’t need to nawrrow it down to a specific element on the page.

one thing you should notice is that .is() should be applied to one element, and it returns a true or false only. so your application of it to tr:grayheading will just plain not work. I think what you are looking for in that situation is either the function find(‘yourSelector’), which will select all the elements within the one you are searching for that meet yourSelector, or hasClass, which i implemented below:

$(document).ready(  function() {    
    $('#yellowHeadOne').click(       
        function($e) {         
            showTheGray('One');       
        }     
    );    
    $('#yellowHeadTwo').click(       
        function($e) {         
            showTheGray('Two');       
        }     
    );    
    $('#yellowHeadThree').click(       
        function($e) {         
            showTheGray('Three');       
        }     
    );  
});


function showTheGray(yellowSection) {  
    var theYellowClass = 'yellow' + yellowSection;
    var $theYellowElement = $('.' + theYellowClass);

    if ($theYellowElement.is(':hidden') && $theYellowElement.hasClass('grayheading')) {       
        $theYellowElement.show('normal');     
    }  
    else { 
        $theYellowElement.hide('normal'); 
    }
} 

so I’m not sure if this is what you want at all, but hopefully it will help show you where you might need to make changes. What this code will do for example when you click on yellowHeadTwo, it will select the element with class yellowTwo, check to see if it is hidden, and if it is and it has the class grayheading, then it will show, otherwise it will be hidden.