6

この問題で私を助けてくれることを願っています...私のコード:

function showIt() {
  document.getElementById("gatewayContainerstacks_in_9_page4").style.visibility = "hidden";
}
setTimeout("showIt()", 2500); // after 2.5 sec

2.5秒後にdivを非表示にしたい。正常に動作していますが、問題は、ターゲットにしたい div が動的であることです。最初の単語だけが常に同じです (gatewayContainerstacks)。その後、ID は動的です (_in_9_page4 の部分)。コードがgatewayContainerstacksで始まるdivを検索する方法はありますか? ヒントをいただければ幸いです..ありがとう...

4

2 に答える 2

9

document.querySelector()をCSS 属性セレクター^=と組み合わせて使用​​して、目的のプレフィックスで始まる ID を持つ要素を照合します。

function showIt() {
  document.querySelector('[id^="gatewayContainerstacks"]').style.visibility = "hidden";
}
setTimeout(showIt, 2500);

ここでは、関数showItを (文字列としてではなくsetTimeout) そのまま に渡しています。理由については、MDN onsetTimeoutを参照してください。

于 2013-08-24T18:42:31.003 に答える
2

まず、文字列を に渡してはいけませんsetTimeout。この場合、showIt(括弧なしで) 渡すだけで問題なく動作します。

実際の問題については、次のようなことを試すことができます。

document.querySelector("[id^=gatewayContainerstacks]").style.visibility = "hidden";

ただし、これはバージョン 8 より前の Internet Explorer では機能せず、一部の古いモバイル ブラウザーでも機能しない可能性があることに注意してください。

data-*より一般的な解決策として、一意の既知の ID を指定してから、他の情報を属性に入れることをお勧めします。

<div id="gatewayContainerstacks" data-in="9" data-page="4">...</div>

またはそのようなもの。

于 2013-08-24T18:43:54.447 に答える