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')返回的颜色是不可靠的，具体取决于浏览器。

请注意，元素的计算样式可能与在样式表中为该元素指定的值。例如，计算出的尺寸样式几乎都是像素，但它们可以在样式表中指定为em，ex，px或％。不同浏览器可能会返回逻辑上但不是文本的CSS颜色值等于，例如#FFF，＃fffffff和rgb（255,255,255）。

我认为最好的方法是使用像

这样的类

＆＃13;

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

＆＃13;

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

＆＃13;

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)。您想检查回报，例如.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属性吗？

3 个答案: