1

私は高低を見てきました。ワンクリックで CSS 要素の 1 つのプロパティを変更したり、1 つの CSS 要素で複数のプロパティを変更したり、1 回の変更でクラスを変更したりするための答えはありますが、これらはすべて直線的です。

たとえば、設定したボタン (またはリンクなど) をクリックする ONE CLICK イベントを作成しようとしています。この ID を #myClickButton と呼びましょう。このボタンは、2 つの個別の ID の css プロパティを 2 つの異なる値に変更する必要があります。これらの ID を #myCssChange1 および #myCssChange2 と呼びます。

#myClickButton をクリックします。#myCssChange1 は、display: ブロックから移動します。--> 表示: なし; 同時に #myCssChange2 は display: none; から移動します。--> 表示: [ここに値はありません];

これらは同時に発生する必要があります (または、コンピューターがコードを実行するために実行する必要がある段階的なアクションを考えると、可能な限り近くで発生する必要があります)。

これは非常に単純だと確信しています... jquery を探しているだけです (CSS や HTML ではありません)。

これまでの私のコード（そして、はい、それが間違っていることに気づきました-機能しませんが、最初のCSSを非表示にするため、その一部が機能します）：

    $(document).ready(function()
      {
        $("#myClickButton").click(function()
          {
            $("#myCssChange1").css('display', 'none');
            $("#myCssChange2").css('display', '');
          }
        );
      }
    );
4

3 に答える 3

1

''閉じる、表示を変更する以外の何かを指定する必要があります。

$(document).ready(function(){
    $("#myClickButton").click(function(){
        $("#myCssChange1").css('display', 'none');
        $("#myCssChange2").css('display', 'block'); // or inline, etc
    });
});
于 2012-11-14T19:48:11.107 に答える
1

あなたのコードは実際に機能しています（設定された表示値をどれも破棄しようとしていると仮定します）。ここではJSFiddle として実行されています。JQuery をロードしていないか、HTML の ID が上記とは異なる場合は、それが機能していないと思います。

また、要素を表示したり隠したりするだけなら、jQuery にはそのためのメソッドがあります。show()それらは非常に便利ですhide()。

于 2012-11-14T19:57:02.627 に答える
0

まず - 返信ありがとうございます。自分のコードが (ほとんど) 機能していることを知ることは、大きな助けになりました (自分で勉強しているので、自分を狂わせることがよくあります)。外部リソースも同様に大きな助けになりました。

CSSに値なしを返すことができないことに気づきませんでした。学んだ教訓。ただし、明確にするために、この特定の問題は、最初に表示された最初のオブジェクト (#myCssChange1) が、テキスト ブロックを含む div であったことです。最初に非表示にした 2 番目のオブジェクト (#myCssChange2) は、内部にテーブルが含まれる div でした。なんらかの理由で、#myCssChange2 テーブルの「display」を「none」以外に設定すると、テーブルを表示するために展開することを拒否する側に圧縮された DIV が発生しました (基本的に、何も入っていない閉じたバー)。

.hide() と .show() の提案の言及のおかげで、別のオプションを偶然発見しました。それは、表示ではなく CSS で「可視性」を使用していました。これにより、結果の HTML 出力で発生していた問題が解決されました。

だから私は使用しました：

    $(document).ready(function()
      {$("#myClickButton").click(function()
          {$("#myCssChange1").css('visibility', 'hidden');
           $("#myCssChange2").css('visibility', 'visible');
          });
      });

これはもう少し寛容であるように見えますが、ディスプレイほど柔軟ではありませんが、ねじれをうまく処理しました.

皆様のご意見がなければ、少なくとも 1 週間はこの作業を続けていただろうと思います。

于 2012-11-15T03:50:47.037 に答える