0

liわかりました、タグの下のリストに6つのボタンがある場合（それぞれrelが配列の一部になっています）、ボタンが機能している間、ボタンを無効にするにはどうすればよいですか？(この場合は動画を再生しています)

私はそれが少しあいまいであることを知っています（私はコードやそのようなものを提供していません）が、それは私がそれを行う方法がわからないためです. 少なくとも正しい方向に向けることができれば、それは役に立ちます。そのため、たとえそれを理解できなくても、少なくとも私の問題を具体的に説明できます...ありがとう...

編集これは私が今やったことです

<li rel='1' id="first">
    <div style="top:0px;">
      <img src="graphics/filler.png" alt="" width="280" height="128" onClick="asess"/>    
    </div>
</li>

次に、対応する機能を追加しました

function asess() {
    document.getElementById("first").disabled = true;
}

最初にこの部分を機能させたいので、関数を元に戻すことにはまだ関心がありません。

編集私はこれを持っていますが、これはうまくいくはずですが、ボタンに「話しかけている」のではないと思いますか?

$("li, .thumbs").bind("touchstart click", function() {
var $this = $(this);
if (!document.getElementById("first").disabled) {
            document.getElementById("first").disabled = true }
            else {document.getElementById("first").disabled = false};
        });

そのID（最初のID）を持つボタンとしか通信しないことはわかっていますが、1つを機能させることができれば、残りを行うことができます。それで、私は何を間違っていますか？

4

3 に答える 3

1

各ボタンにはonclick イベント ハンドラがあります。onclick ハンドラーが何もしないようにするには、ハンドラーにアタッチされた JavaScript メソッドが を返す必要がありfalseます。jQuery でこれを行う場合は、 (またはIEの場合)return false;を呼び出すのと同じe.preventDefaultです。event.preventDefault

通常のイベント ハンドラーがボタンに関連付けられたアクションを開始するとき、onclick アクションを無効にするイベント ハンドラーを追加する必要があります。

ボタンが無効になっていることをユーザーが認識できるように、ボタンにも新しい CSS スタイルを適用する必要があるでしょう。

アクションが完了したら、onclick アクションを無効にするイベント ハンドラーを削除し、通常のアクションを再度使用する必要があります。

いつでもフラグを使用して、アクションが進行中であることを示し、アクションでこれをオンまたはオフに設定できます。フラグがオンの場合、イベント ハンドラー メソッドは false を返します。

イベント ハンドラーを使用すると、ユーザーがボタンをクリックしようとしたときに、false を返す前にアラートを表示することもできます。

編集：

必要な JavaScript の種類は次のとおりです。最初のクリックでプロセスが開始され、 を使用して 5 秒後に停止しsetTimeout('stopAction()', 5000);ます。その間にアイテムをもう一度クリックすると、待機メッセージが表示されます。

jQuery を使用して堅牢なクロス ブラウザー ソリューションを開発することを検討することをお勧めします。

var inProgress = false;

function asess() {
    if(inProgress) {
      alert('Please wait ...');
      return false;
    } else {
      startAction();
    }
}

function startAction() {
    inProgress = true;
    alert('Starting');
    document.getElementById("first").style.backgroundColor  = '#333333';
    setTimeout('stopAction()', 5000);
}

function stopAction() {
    inProgress = false;
    alert('Stopping');
    document.getElementById("first").style.backgroundColor  = '#FFFFFF';
}
于 2012-05-23T04:13:11.547 に答える
0

クリックハンドラー内の要素を「無効」にして、コールバックが正常に実行されたときに再度有効にすることができます。

属性を持つ要素にバインドするクリックハンドラーdisabled="disabled"は、ブラウザー間で一貫して実装されることが保証されておらず（つまり、イベントが発生する可能性がある/発生する可能性があります）、とにかくフォーム要素を除いて許可されません。class="disabled"追加するだけで、たとえばグレー表示にすることで、無効になっている要素の状態をスタイル設定するための追加の機能が得られます。

ああ、そしてjQuery。当然、このロジックは「通常の」JavaScriptで再現できますが、ライブラリの使用法が非常に整理されています。

$('#my-button').click(function() {
    var $this = $(this); //cache the reference
    if (!$this.hasClass('disabled')) {
        $this.addClass('disabled');
        alert('hello world!');
        setTimeout(function($btn) {
            $btn.removeClass('disabled');
        }, 5000, $this);
    } else {
        return false;
    }
});
于 2012-05-23T05:21:56.390 に答える
0

document.getElementById("my_button").disabled = true;

そして終わったら。

document.getElementById("my_button").disabled = false;

于 2012-05-23T04:06:02.057 に答える