1

所以，我正在尝试使用 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。然而，正如 Travis J. 指出的那样，代码在 jsFiddle 中工作，这让我彻底困惑。有人可以解释为什么吗？

4

4 回答 4

3

他们似乎都为我工作，这是一个演示：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);
于 2013-03-06T23:22:15.187 回答
0

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

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

您还可以像这样合并前两个调用：

$('.good-pass').css({visibility:'visible',lineHeight:'1'});
于 2013-03-06T23:19:22.367 回答
0

你在你的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 块始终处于隐藏状态。

于 2013-03-06T23:21:26.893 回答
0

选项 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;
}
于 2013-03-06T23:43:52.833 回答