jQuery 不会切换 css 属性？

Question

我知道有很多 jquery css 切换线程，但我采用了自己的方法，但我不明白为什么这不起作用：

 <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>

在 FF 和 Chrome 中都尝试过，但根本行不通！

这是HTML：

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

Answer 1

检查 .css('color') 返回的颜色是不可靠的，它因浏览器而异。

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, e.g., #FFF, #ffffff, and rgb(255,255,255).

我认为最好的方法是使用 class 之类的

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

试试这个。

Html代码：

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

Js代码：

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

Answer 3

您的代码已经存在，只是语法错误，.css("visibility"=="hidden") 计算结果为 css(true)。您要检查 return，例如 .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>

jQuery 不会切换 css 属性？

jQuery won't toggle css property?

javascript

jquery

html

css

toggle