jQuery不会切换CSS属性？

Question

I know there are tons of jquery css toggle threads, but I took my own approach, and I can't see why this doesn't work:

 <script>
    $("#id").click(function(){ 
        if($("#example").css("visibility"=="hidden"))
        {
            console.log("if reached");
            $("#example").css( "visibility", "visible" );
            console.log($("#example").css("visibility"));
        }
        else
        {
            $("#example").css( "visibility", "hidden" );
            console.log("else reached");
            console.log($("#example").css("visibility"));
        }
    })
    </script>

Tried it in both FF and Chrome, and it simply doesn't work!

Here's the HTML:

<input id="id" type="text"></input>
<div id="example">Test Test Test </div>

Answer 1

Checking the color returned by .css('color') is not dependable, it way vary depending on browsers.

Note that the computed style of an element may not be the same as the value specified for that element in a style sheet. For example, computed styles of dimensions are almost always pixels, but they can be specified as em, ex, px or % in a style sheet. Different browsers may return CSS color values that are logically but not textually equal, eg, #FFF, #ffffff, and rgb(255,255,255).

I think the best approach will be is to use a class like

 var $example = $("#example"); $("#id").click(function() { $example.toggleClass('red'); if ($example.hasClass('red')) { console.log('has red now'); } else { console.log('default color'); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id="id" type="button"></input> <div id="example">Test Test Test</div> 

Answer 2

Try this one.

Html code:

<input id="id" type="button"></input>
<div id="example">Test Test Test </div>

Js code :

$(function(){   
    $("#id").click(function(){         
        if( $('#example').is(':visible') ) {
            $('#example').hide();
        } else {
            $('#example').show();
        }
    });
});

Answer 3

You're code is already there, just a syntax error, .css("visibility"=="hidden") evaluates to css(true) . You want to check the return, eg .css("visibility")=="hidden"

 <script>
$("#id").click(function(){ 
    if($("#example").css("visibility")=="hidden"))
    {
        console.log("if reached");
        $("#example").css( "visibility", "visible" );
        console.log($("#example").css("visibility"));
    }
    else
    {
        $("#example").css( "visibility", "hidden" );
        console.log("else reached");
        console.log($("#example").css("visibility"));
    }
})
</script>