1

編集**

私のゲームでは、ワンクリックでボタンを無効にしたいのですが、何らかの理由で、これまで見てきたすべての方法が機能しません。

これが私が今持っているものです。

$('.minibutton').click(function() {

$(this).attr('disabled','disabled');
$('.minibutton').prop('disabled', false);
$('.picstyle').show();
$('td').removeClass('spellword');
var r = rndWord;
while (r == rndWord) {
    rndWord = Math.floor(Math.random() * (listOfWords.length));
}

$('td[data-word="' + listOfWords[rndWord].name + '"]').addClass('spellword');
$('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3').css('color', 'transparent');

var noExist = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('wordglow2');
if (noExist) {
    $('.minibutton').click();

} else {

    $("#mysoundclip").attr('src', listOfWords[rndWord].audio);
    audio.play();
    $("#mypic").attr('src', listOfWords[rndWord].pic);
    jQuery(pic).show();
}


}).trigger("click");

クリック機能をに変更してみました。

$('.minibutton').one("click", function() {

バインドとバインド解除も試みましたが、機能しません

フィドルhttp://jsfiddle.net/7Y7A5/9/

写真を手がかりとして、強調表示された単語をつづります。単語を3回間違えると、「ミニボタン」が表示されるため、先に進む機会が与えられます。この時点で、ユーザーがクリックできるようにするのは1回だけにしてから、再び消えるようにします。

4

3 に答える 3

1 
<input type="submit" onclick="this.disabled = true" value="Save"/>
于 2012-10-29T14:30:32.200 に答える
1

jQuery.on()と.off()メソッドを見てみましょう。jQuery のサイトのドキュメントには、名前空間に関するセクションがあるはずです。このセクションは、探しているものをカバーしています。

以下に、あなたが探している解決策を示しましたが、とにかくドキュメントを確認して、理解を深めてください。

まず、クリック ハンドラの上に次の変数宣言を追加します。

var timesClicked = 0;

次に、ハンドラー宣言を次のように変更します。

$('.minibutton').on("click.oneclick", function () {...});

そして、ハンドラーに次の行を追加します。

if (timesClicked > 0) {
    $(this).off("click.oneclick");
} else {
    timesClicked++;
}

基本的に、ここで行われているのは、ページ上の他のすべてのクリック イベント ハンドラー (つまり、その名前空間を持たない他のすべてのクリック ハンドラー) と区別するために、クリック イベント ハンドラーに個別の名前を付けていることです。名前空間「foo」を適用することもできましたが、私は名前空間「oneclick」を適用することにしました。その結果、他のクリック イベント ハンドラー (つまり、指定された名前空間を持たない他のハンドラー) を削除せずに、その特定のクリック イベント ハンドラーを削除することができます。

この更新されたソリューションのフィドルを試してください。


アップデート：

クリックイベントを再度有効にするという質問を解決するには、まず次のことを行います (注: コードにはクリーンアップが必要なものがたくさんありますが、空のクリックハンドラーがミニボタンに設定):

var clickOnceTest = 0;
function enableMinibutton() {
    $('.minibutton').on("click.clickOnceNS", function() {
        if (clickOnceTest > 0) {
            $(this).off("click.clickOnceNS");
        } else {
            clickOnceTest++;
        }
        $('.minibutton').prop('disabled', false);
        $('.picstyle').show();
        $('td').removeClass('spellword');
        var r = rndWord;
        while (r == rndWord) {
            rndWord = Math.floor(Math.random() * (listOfWords.length));
        }

        $('td[data-word="' + listOfWords[rndWord].name + '"]').addClass('spellword');
        $('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3').css('color', 'transparent');

        var noExist = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('wordglow2');
        if (noExist) {
            /////
            /////
            /////
            /////
            /////        
            ////// Is this supposed to trigger a click? because all this does is set another click handler (which does nothing) to minibutton..
            /////
            /////
            /////
            /////
            /////
            $('.minibutton').click();

        } else {

            $("#mysoundclip").attr('src', listOfWords[rndWord].audio);
            audio.play();
            $("#mypic").attr('src', listOfWords[rndWord].pic);
            pic.show();
        }

    });
}

enableMinibutton();
$(".minibutton").trigger("click");

それが完了したら、再度有効にする準備ができたらminibutton、メソッドを呼び出すだけですenableMinibutton()。メソッドを再度呼び出す必要がある場合はtrigger("click")、そうしてください (そもそもなぜそれがあったのか正確にはわかりません)。このメソッドは、ボタンを 2 回目に表示する直前または直後に呼び出すことができます (私の好み - 不要なハンドラーによってスクリプトの速度が低下するのは好きではありません)。または、ボタンを非表示にした直後に呼び出すこともできます。

クリーニングが必要な他のものについては、コード全体に、私が指摘した空のクリック ハンドラーのようなものがありますが、これらは不要であり、プログラムを遅くしたり、エラーをスローしたり、単に機能しません。これらのものをできるだけ早く削除またはコメントアウトしてください。これを行うと、コードがよりスムーズに実行され、悪いコードの影響を受けることなく、テスト/実験が適切に成功/失敗する可能性が高くなります。

さらに、これを十分に強調することはできませんが、要素セレクターを変数に設定する必要があります。あなたが選択しminibutton、minibutton2そして、コード全体で何十回も他のアイテムの束。セレクターを上部の変数に設定し、その変数を使用して要素を参照するだけです。何度も選択する必要はありません。jQuery セレクターを呼び出すたびに、基本的にはセレクターを満たす要素を DOM で検索しています。コレクションに常に同じ要素が含まれる場合は、セレクターを変数に設定し、代わりに変数を呼び出します。このようにして、これらの要素の DOM を 1 回だけ検索します。重いプログラム、特にこのようなプログラムでは、パフォーマンスの違いが非常に顕著です。この構文に慣れていない場合のために、 と を使用した 2 つの例を次に示しminibuttonますminibutton2。

var $minibutton = $(".minibutton");
var $minibutton2 = $(".minibutton2");
....
$minibutton.on("click.click.......
...
$minibutton.trigger(....
...
$minibutton2.prop(...
...

ご覧のとおり、セレクター変数の前に を付けるのが好きです。これにより、セレクター変数$が保持する変数が選択された要素であることを簡単に確認して覚えることができます。これは必須ではなく、変数名を任意に設定できます。

これを行う唯一の問題は、セレクターによって返される DOM にさらに項目を追加する予定がある場合は、変数を「更新」する必要があることです。変数は、セレクターが最初に呼び出された時点で、セレクターによって返されたすべての要素を参照します。これは、特定のクラスの要素のコレクションがあり、そのコレクションを参照するように変数を設定する場合、そのクラスで追加の要素を追加する前に、後でそのセレクタによって返される追加の要素を参照するために、次のことを行う必要があることを意味します。再度設定してください。はい、長くてわかりにくいと思いますが、実際には非常に単純で、オンラインで何十もの例があります。

于 2012-10-29T14:29:15.370 に答える
0

「無効」または「1 回」で最新の Js を使用してください。

button.disabled = true;

また

button.addEventListener("click", function() {
    // Fire event
}, {once : true});

ドキュメンテーション、CanIUse

于 2017-09-24T21:24:04.173 に答える