16

jqueryを使用せずに、IDを指定したhtml要素が表示されているかどうかを検出しようとしています。

コンテキスト:

ユーザー パスワードを忘れたページには、ユーザーがログイン名を入力して [送信] をクリックするフォームがあります。その後、彼がチャレンジ質問を設定した場合、それが表示され、彼はこの質問に回答して再度提出することができます。(前の同じボタン)。

私の問題：

ユーザーが送信をクリックすると、IE で数回クリックすると、クリックするたびに 1 つの電子メールが届きます。

私が思うこと：

この送信ボタンをクリックした後にボタンを無効にしたいのですが、次の 2 つの条件が正しい場合にのみ無効にできます。

  1. ユーザーがすでにログイン名を送信している場合 (エラーなし)。
  2. ユーザーは挑戦的な質問を登録しており、彼はそれに正しく答えました。

これが行われるプロセスを変更することはできないので、回答のフィールドにIDを追加して、それが表示されるかどうかを確認することを考えました。そうで、ユーザーが送信ボタンをクリックした場合、ラベルに属性無効ボタンを適用したいと思います。私が知らないのは、jqueryを使用せずにこれを行う方法です。

jQuery を使用すると、次のようなことができます。

if($('#secretAns').is(':visible')) {
    //i think it could be the solution 
    $('#general_Submit.Label').attr( disabled, disabled );

}

適用する:

<div id="secretAns" class="loginTxtFieldWrapper">
    <font color='red'>*</font><input type="text" name="secretAns" />
    <input type="hidden" name="isAnswerPage" value="1"/>
</div>
<p id="loginSubmitLink">
    <input id="general_Submit.Label" type="submit" value="general_Submit.Label" />" />
</p>

誰もが jQuery を使用する傾向があり、私のアプリケーションではそれを使用できないため、純粋な Javascript ソリューションを検索するのは難しいと思います。

4

5 に答える 5

27

Google は、jQuery がどのように機能するかを知るのに役立ちました。同じことができます。

jQuery 1.3.2 では、ブラウザーから報告されたoffsetWidthまたはoffsetHeightが 0 より大きい場合、要素は表示されます。

リリースノート

ソースコードを検索すると、次のようになりました。

// The way jQuery detect hidden elements, and the isVisible just adds "!".
elem.offsetWidth === 0 && elem.offsetHeight === 0
于 2013-01-02T12:37:15.603 に答える
1

これは、通常のコードが役立つことはめったにないことを確認してください

<!DOCTYPE html>
<html>
<body>
<div id="one" style="visibility: hidden;">The content of the body element is displayed in your browser.
</div>

<div id="two" style="visibility: visible;"> I'm Cool
</div>

<div onclick="push();"> Click me </div>
<script>
function push() {
a = document.getElementById("one").style.visibility;
alert("one "+a);

b = document.getElementById("two").style.visibility;
alert("one "+b);
}
</script>
</body>
</html>

上記のコードは、Uが必要とするIDを使用してdivの可視性ステータスを示します。

于 2013-01-02T12:45:51.883 に答える
1

ボタンを無効にすることを考えていたので、この問題の解決策について私の考えが間違っていたことをここに書きます。機能させるには本当にコストがかかるからです。このように、いくつかのアイデアを研究、テストし、@gdoron と @AmeyaRote がもたらしたアイデアを読んだ後、簡単な解決策は、クリックした後に「送信」ボタンを非表示にすることであることがわかりました (ページが更新され、検証がチェックされ、このプロセスの後、ボタンは再び使用可能になります)。したがって、ユーザーが送信ボタンを複数回クリックすることを避けるための問題を解決するソリューションは、この特定のケースでは無効にできません (クリックした後に無効にすると、フォームは送信されませんでした):

HTML

ボタンを非表示にするために作成した JavaScript 関数を呼び出す onclick 属性を追加しました。

<p id="loginSubmitLink">
    <input id="general_Submit.Label" type="submit" onclick ="avoidDoubleSubmit();" value="general_Submit.Label" />" />
</p>

Javascript

function avoidDoubleSubmit() {
    <c:if test="${not empty secretQues}">
        event_addEvent(window,'load',function(){document.ResetPasswordForm.secretAns.focus();});
        document.getElementById('general_Submit.Label').style.display ='none';
    </c:if>
}
于 2013-01-03T10:58:27.910 に答える
0

general_Submit.Label ボタンをクリックして、関数 Callfun() を呼び出してから、ボタンを無効にします

<input id="general_Submit.Label" onclick="Callfun()" type="submit" value="<ezmi18n:message key="general_Submit.Label" />" />

    function Callfun()
    {
     document.getElementById("general_Submit.Label").disabled = true;
    }
于 2013-01-02T12:44:47.983 に答える