2

ボックス追加ボタン (#purchase) を使用して、ショッピング カートにボックス/アイテムを追加します。(これには 25 クレジットが必要です)

内側のオレンジ色の div をクリックすると、クレジットも 15 クレジット減り、一番上の div がフェードアウトします (これにより、どの要素がすでに 15 クレジットを消費しているかがわかります。フェードアウトは 1 回だけで、これは良いことですが、フェードアウトしても、ユーザーは引き続き div をクリックできるため、クレジットが必要以上に減少します。

.one() でいくつか試してみましたが、追加された要素の 1 つでしか機能しません。どうすればこれを達成できるか教えてもらえますか? なぜ。

JSFiddle

コード HTML

<button id="purchase">Add a box </button>
<input id="money">
<div class="container"></div>

JS

var counter = 0;
$("#money").val(250);

$('#purchase').click(function() {

   if ($("#money").val() < 25) {return;}
    var box = $('<div class="box"' + (counter) + '><div class="yellow"' + (counter) + '><div class="buy"' + (counter) + '></div></div></div>').appendTo('.container');
    $("#money").val(Number($("#money").val()) - 25).triggerHandler('change');

});

$('#money').change(function() {
    $('#purchase').prop("disabled", $(this).val() < 25);
});

$('.container').on('click', '.buy', function() {
    if ($("#money").val() < 15) {return;}
    $(this).fadeOut(4000, callbackFunction);
    $("#money").val(Number($("#money").val()) - 15).triggerHandler('change');
});

function callbackFunction() {
 alert('done');   
}
4

3 に答える 3

4

を使用one()して、要素ごとに 1 回だけ実行する必要があるイベント ハンドラーをアタッチできます。これを試して：

$('.container').one('click', '.buy', function() {
    if ($("#money").val() < 15) {return;}
    $(this).fadeOut(4000, callbackFunction);
    $("#money").val(Number($("#money").val()) - 15).triggerHandler('change');
});

API リファレンス: one()

アップデート

次を使用して手動でこれを達成することもできますunbind()。

$('.container').on('click', '.buy', function() {
    $(this).unbind('click');
    if ($("#money").val() < 15) {return;}
    $(this).fadeOut(4000, callbackFunction);
    $("#money").val(Number($("#money").val()) - 15).triggerHandler('change');
});
于 2012-11-08T09:06:04.787 に答える
2

コードを確認し、クリックを1回だけ実装する要素を実装します 

$("purchase").one("click", function() {
if ($("#money").val() < 25) {return;}
var box = $('<div class="box"' + (counter) + '><div class="yellow"' + (counter) + '><div       class="buy"' + (counter) + '></div></div></div>').appendTo('.container');
$("#money").val(Number($("#money").val()) - 25).triggerHandler('change');
});
于 2012-11-08T10:16:15.613 に答える
1

要素を作成するときにイベントをバインドします。

var counter = 0;
$("#money").val(250);



$('#purchase').click(function() {


    if ($("#money").val() < 25) {return;} // or alert('not enough money');
    $('<div class="box">').data('counter',counter)
           .append($('<div class="yellow">').data('counter',counter)
           .append($('<div class="buy">').data('counter',counter).one('click',buy_click)
                  )).appendTo('.container');
    $("#money").val(Number($("#money").val()) - 25).triggerHandler('change');

});

$('#money').change(function() {
    $('#purchase').prop("disabled", $(this).val() < 25);
});

var callbackFunction=function() {};

var buy_click=function() {
    if ($("#money").val() < 15) {return;}
    $(this).fadeOut(4000, callbackFunction);
    $("#money").val(Number($("#money").val()) - 15).triggerHandler('change');
};

data() を使用して、数値だけでなくデータを保持します

于 2012-11-08T10:29:05.083 に答える