0

要素の「可視性」(大まかに使用) を適切に評価するにはどうすればよいですか? hide、show、fade、fadeToggle .opacity、その他の関数のいくつかには精通していますが、困惑するのはその評価です。

目標は、フォーム要素 (つまり、 $('input').change() ) への変更によってトリガーされる DIV 内のテキストを更新することです。DIV 内のテキストは、フォームの各 <input> 要素から派生します。ユーザーが要素を変更することを選択した場合、DIV テキストは新しい値で更新されます。ただし、テキストを現在の文字列から更新された文字列に徐々に変更しようとしています。( 2 台のプロジェクターを使用して 1 つの画像から次の画像にフェードアウトする、インターネット以前の「スライドショー」を覚えていますか? )

これを実現するには、上下に 2 つの DIV が必要であると考えました。#preview1 がフェードアウトしている間、#preview2 は更新されたテキストでフェードインします。

だから私はこれに似た（単純化された）ものを試しましたが、fadeIn（）だけが機能します。「else」は決して決定されません。

$("input").change(function(){
    if($('#preview1').is(':visible'))
    //if($('#preview1').css('opacity',1))
    {
        $('#preview1').fadeOut();
        fnBuildPrev('#preview2');
        $('#preview2').fadeIn();
    }
    else
    {
        $('#preview2').fadeOut();
        fnBuildPrev('#preview1');
        $('#preview1').fadeIn();
    }
});

それから私はこれを見つけました：http : //api.jquery.com/visible-selector/

"可視性: 非表示または不透明度: 0 の要素は、レイアウト内のスペースを消費するため、可視と見なされます。 "

「if」ステートメントで非常に多くのバリエーションを試しました

正しい条件付き評価には何を使用すればよいですか?

EDIT1：「if」評価を、最初に投稿したもの（.not）の代わりに「.is」に変更しました。これは間違った印象を与えました。新人投稿ミス。

EDIT2: Sam Tysonが以下で提供するものを理解できなかった後(この投稿まで jsFiddle について聞いたことがありませんでした)、私は jsFiddle で彼の推奨事項を使い始めました。

正確な問題をもう少しうまく切り分けるために、スクリプトを単純化しました。

彼の例の JavaScript を次のように変更しました。

$("input").click(function(){
    if($('#preview1').css('opacity',0))
    {
        $('#preview1').css('opacity',1);
    }
    else
    {
        $('#preview1').css('opacity',0);
    }
});

#preview1 の CSS を次のように変更しました。

#preview1 {
    border: 1pt solid blue;
    opacity: 0;
}

私が言えることから、私が抱えている本当の問題は、elseに決して到達しないことです。したがって、#preview1 の不透明度は、実際には最初のクリックで「0」を返します。ただし、2 回目のクリックでは不透明度は変わりません。else ステートメント内で多くの要素の変更を試みましたが、実行されません。

EDIT3：これに対する正解は、以下のブライアンからのものでした。これをいじるために独自のjsFiddleを作成しました。それを修正したいという私の強迫観念を養うために、私はNilが私を助けてくれたチャットルームに目を向けました:

NIL: if($('#preview1').css('opacity',0)) ← これは何をするためのものですか?
BRIAN: 非表示に設定します
NIL: わかりました、なぜ条件付きなのですか?

プロパティの値をチェックする代わりに、if ステートメントでメソッドを使用していました。これは、どの言語にも慣れていないという試練です。私のjsFiddleで動作中のバージョンを確認してください。

ブライアン、ニル、ありがとう！

http://jsfiddle.net/brianckelley/7QLK3/8/

編集 4: サムは、私が jsFiddle で変更した基本コードを教えてくれました。ありがとう！

4

4 に答える 4

3

.not() は、一致した要素のセットから要素を削除します。

やりたいことは、「is()」関数を使用することです。

$("input").click(function(){
  if($('#preview1').is(':visible')) {
      $('#preview1').fadeOut();
      fnBuildPrev('#preview2');
      $('#preview2').fadeIn();
  }
  else
  {
      $('#preview2').fadeOut();
      fnBuildPrev('#preview1');
      $('#preview1').fadeIn();
  }
});

私のjsFiddleを参照してください。

于 2012-04-14T01:04:54.460 に答える
1

条件を変更できます：

if($('div').css('opacity') == 0){
    // do whatever
}​​​​​​​​​​​​​​​​​​

jsfiddle の例

于 2012-04-14T00:53:01.990 に答える
0

これが機能するかどうかを確認できますか

if($('#preview1').css('display') == 'none')
于 2012-04-14T00:53:25.610 に答える
0

私が正しく理解しているなら、あなたはそれが返されるべきであり、またfalseを返すべきvisibility: hiddenだと言いたいです。falseopacity:0

自分で評価を確認するだけ..それぞれを確認するメソッドを作成する

    $.fn.isTrulyNotVisible = function() { // silly name :P

        var $this = $(this);
        return !$this.is(':visible') || 
               $this.css('visibility') === 'hidden' || 
               !parseInt($this.css('opacity'), 10);
    };

http://jsfiddle.net/KAbPx/1/

$("input").change(function(){
    if($('#preview1').isTrulyNotVisible())

    {
        $('#preview1').fadeOut();
        fnBuildPrev('#preview2');
        $('#preview2').fadeIn();
    }
    else
    {
        $('#preview2').fadeOut();
        fnBuildPrev('#preview1');
        $('#preview1').fadeIn();
    }
});
于 2012-04-14T00:56:01.880 に答える