Question

所以，我正在尝试使用jQuery使文本有条件地不可见。有问题的文字在html中如下：

<div class="info">
    <div class="bad-pass">Password is incorrect.</div>
    <div class="good-pass">Password is correct.</div>
</div>

相关的css如下：

.info {
    visibility: hidden;
    line-height: 0;
}
.info div:first-child {
    color: red;
}
.info div:last-child {
    color: green;
}

然后，我调用以下函数，传入true或false（无论哪个都没关系。）

function updatePass(correct) {
    if(correct) {
        $(".good-pass").css("visibility", "visible");
        $(".good-pass").css("line-height", "1");
        $(".bad-pass").css("visibility", "hidden");
    }
    else {
        $(".good-pass").css("visibility", "hidden");
        $(".bad-pass").css("visibility", "visible");
        $("#bad-pass").css("line-height", "1");
    }
}

当我调用函数让jQuery更改它们时，有人可以解释为什么css属性没有改变吗？

编辑：

我最终放弃了jQuery并在PHP中获得了理想的结果，因为我已经在文档的其他地方使用了PHP。但是，正如特拉维斯J.所指出的那样，代码在jsFiddle中起作用，这让我感到非常困惑。有人能解释一下原因吗？

Answer 1

他们似乎都适合我，这是一个演示：http://jsfiddle.net/tTrcL/

有一点需要注意的是，您使用$(".bad-pass").css("line-height", "1");

错误地定位$("#bad-pass").css("line-height", "1");

JS

function updatePass(correct) {
if(correct) {
    $(".good-pass").css("visibility", "visible");
    $(".good-pass").css("line-height", "1");
    $(".bad-pass").css("visibility", "hidden");
}
else {
    $(".good-pass").css("visibility", "hidden");
    $(".bad-pass").css("visibility", "visible");
    $(".bad-pass").css("line-height", "1");
}
}
updatePass(false);
setTimeout(function(){updatePass(true);},3000);

Answer 2

确保您正在加载jQuery，并使用dom ready事件，例如：

$(document).ready(function() {
    ...
});

你也可以像这样合并前两个电话：

$('.good-pass').css({visibility:'visible',lineHeight:'1'});

Answer 3

你的css犯了错误。改变自：

.info {
    visibility: hidden;
    line-height: 0;
}
.info div:first-child {
    color: red;
}
.info div:last-child {
    color: green;
}

为：

.info div{
    visibility: hidden;
}
.info div:first-child {
    color: red;
}
.info div:last-child {
    color: green;
}

你的jquery代码改变了.bad-pass和.good-pass的可见性，但.info块一直都是隐藏的。

Answer 4

选项1 在CSS中创建一个类并修复一个不正确的类

.info div:first-child {
    color: red;
}
.info div:last-child {
    color: green;
}
.shown{
   visibility:visible;
   line-height: 1;
}
.notshow{
     visibility:hidden;
     line-height: 0;
}

现在使用这些类：

首先在文档就绪电话中添加它：

$('.info div').addClass("notshown");

然后使用您的函数切换em：

function updatePass(correct) {
    if(correct) {
        $(".good-pass").addClass"shown").removeClass("notshown");
        $(".bad-pass").addClass"notshown").removeClass("shown");
    }
    else {
        $(".bad-pass").addClass"shown").removeClass("notshown");
        $(".good-pass").addClass"notshown").removeClass("shown");
    }
}

选项2 或者，只需隐藏并显示em： CSS：

.info div:first-child {
    color: red;
}
.info div:last-child {
    color: green;
}

代码：

$('.info div').hide();

function updatePass(correct) {
    if(correct) {
        $(".good-pass").show();
        $(".bad-pass").hide();
    }
    else {
        $(".good-pass").hide();
        $(".bad-pass").show();
    }
}

注意这也适用于更简单的CSS（检查颜色 - 想要红色好吗？对我来说似乎很奇怪，但这就是你拥有的）

.good-pass {
    color: red;
}
.bad-pass {
    color: green;
}

jQuery不会影响css属性

4 个答案: