0

次のリンクがあります：

<a id="HeaderImage1Tab" style="display: block;" onclick="HeaderImage1Tab(this);" href="javascript:void(0)">- Header Image 1</a>

このリンクをクリックすると、次のjsコードが呼び出されます。

function HeaderImage1Tab(link) {
    if (link.innerText == "+ Header Image 1") {
        document.getElementById("HeaderImage1Table").style.display = 'block';
        link.innerText = "- Header Image 1";
    } else {
        document.getElementById("HeaderImage1Table").style.display = 'none';
        link.innerText = "+ Header Image 1";
    }
}

基本的には、リンクの下のテーブルブロックを表示/非表示にするだけです。Firefoxを除くすべてのブラウザですべて動作します。Firefoxでは、コードを起動してテーブルブロックを表示するには、リンクをダブルクリックする必要があります。そして、奇妙なことに、最初にダブルクリックするだけで、その後は期待どおりに機能します。

更新＃1：私はasp.netサイトで作業しています。同じページに上記のように約15のリンクもあります。

解決しました

更新＃2：問題を解決するtextContent代わりに使用する。innerTextFirefoxはをサポートしていないようinner textです。

アップデート＃3： このJSはtextContent、IE8以前の修正の問題を切り取った：

if (Object.defineProperty && Object.getOwnPropertyDescriptor &&
     Object.getOwnPropertyDescriptor(Element.prototype, "textContent") &&
    !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get)
  (function() {
    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
    Object.defineProperty(Element.prototype, "textContent",
      { 
        get : function() {
          return innerText.get.call(this)
        },
        set : function(x) {
          return innerText.set.call(this, x)
        }
      }
    );
  })();
4

1 に答える 1

3

Felix Klingがコメントで述べているように、innerTextはFireFoxではサポートされていないため、textContent（ここ）を使用する必要があります。

ダブルクリックでテーブルの表示と非表示が機能する理由は、最初にクリックしたときに、そのプロパティが存在しないために定義されていないlink.innerTextを「+ヘッダー画像1」と比較するためです。値が等しくないため、2番目のコードブロックが実行され、リンクオブジェクトにinnerTextプロパティが作成され、「+ヘッダー画像1」に設定されます。その後、ロジックは機能します（ただし、リンク内の実際のテキストを変更することはできません）。これは、Javascriptを使用すると、プロパティが何もしない場合でも、任意のオブジェクトにプロパティを設定できるためです。

于 2013-03-18T20:23:37.600 に答える