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プロパティが変更されない理由を誰かが説明できますか?

編集：

ドキュメントの他の場所で既に PHP を使用しているため、jQuery をあきらめて、PHP で理想的な結果を得ることになりました。しかし、Travis J. が指摘したように、コードは jsFiddle で動作し、完全に混乱しました。誰かが理由を説明できますか？

4

4 に答える 4

3

どちらも私にとってはうまくいくようです。ここにデモがあります: http://jsfiddle.net/tTrcL/

注意すべきことの 1 つは、誤ってターゲティング$(".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

あなたは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 に答える
0

jQuery をロードしていることを確認し、次のような dom ready イベントを使用します。

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

次のように、最初の 2 つの呼び出しをマージすることもできます。

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