Internet Explorer中的jQuery隐藏/显示问题

Question

<script type="text/javascript">
    function unhide(divID) {
        var item = document.getElementById(divID);
        if (item) {
            item.className=(item.className=='hidden')?'unhidden':'hidden';
        }
    }
</script>

I'm trying to figure out what's wrong with this code. It toggles hide/unhide for all browsers except IE. The direct site is http://lilacparadise.x10.mx/comics/ . I'm helping a friend out but I have little experience with javascript. Can someone point me in the right direction to fix this code?

Answer 1

i am not 100% sure about your question. Instead of function i would suggent you to use toggle in jquery.remaining jquery will take care.

css part.

.hidden
{
display:none
}

.visi
{
display:block
}

jquery part.

$("#divid").click(function () {
      $(this).toggleClass("hidden");
    });
})

hope this will be helpfull

Answer 2

Sorry, I had a computer problem and had to restart.

First, if you have access to the page itself, get rid of this line :

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

And replace it with:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

That version of jQuery was released in January, 2009. That's ancient, and it's time to get rid of it. The $.fadeToggle() method I use below was introduced in 1.4.4.

You should be able to figure out what I've done below. Let me know if you have any questions. It's not drag and drop. There's also more CSS in the fiddle demo below, but I've only included the parts relevant to the demo.

$(function load(){
    var $my = $('#my'),
        $comment = $my.find('.comment'),
        $siblings = $my.find('.siblings');

    $my.click(function toggle(){
        $comment.text($siblings.not(':hidden').text());

        $siblings.toggleClass('green').fadeToggle();
    });
});​

http://jsfiddle.net/userdude/ULDKg/

This is the CSS and markup it's working with:

.siblings.hidden {
    display: none;
}
.siblings.green {
    background: green;
}

<div id="my">
    <div class="comment">Click for the comment...</div>
    <div class="siblings green">I don't know...</div>
    <div class="siblings hidden">What is it?</div>
</div>​

I've tested in Firefox, Chrome, and IE 7-9 and it works fine. But you need v1.4.4 or higher at least.

Also note that this uses the short form of $(document).ready() . This means that it waits until the page has been parsed and the DOM is ready to be accessed (in it's entirety). You can use $(window).load() instead, it would work, but what you see here mimics what's already been done (which is ok). Just keep it in mind you need it to wait until the page has been parsed at least, or the code sans either wrapper method needs to follow the elements it's accessing in where it's included.

Answer 3

className may not work properly in IE. Can you try this and let me know whether it works,

<script type="text/javascript">
    function unhide(divID) {
        var item = document.getElementById(divID);
        if (item) {
           if(item.getAttribute('class')=='hidden'){
               item.setAttribute('className', "unhidden") || item.setAttribute('class', "unhidden");
           }else{
               item.setAttribute('className', "hidden") || item.setAttribute('class', "hidden");
           }

        }
    }
</script>