點擊 function，只開火一次，然后再也不開火

Question

我正在嘗試進行交易或不交易游戲，用戶第一次加載頁面時，他們必須單擊一個框以將其作為他們的 select。 之后，他們會通過單擊各個框來進行。

但是，我不知道如何讓我的 function 選擇框只運行 1 次點擊！

jQuery(document).ready(function($) {

    function noop() {};

    function chooseBox() {

        $(".box").on( "click", function( event ) {
            $boxID = $(this).attr('id');
            $boxValue = $(this).attr('rel');
            $boxNumber = $boxID.replace('box','');
            $usersBox = $("#users-box span");

            $usersBox.html($boxNumber);
            $usersBox.attr('rel', $boxValue);
            $usersBox.addClass('chosen');

            chooseBox = noop;
        });
    }

    chooseBox();
});

HTML：

<div class="boxes">
    <ul class="box-choices">
        <li id="box1" class="box" rel="30.00"><span>1</span></li>
        <li id="box2" class="box" rel="25.00"><span>2</span></li>
        <li id="box3" class="box" rel="5.00"><span>3</span></li>
        <li id="box4" class="box" rel="2.50"><span>4</span></li>
        <li id="box5" class="box" rel="225.00"><span>5</span></li>
    </ul>
    <ul class="box-choices">
        <li id="box6" class="box" rel="75.00"><span>6</span></li>
        <li id="box7" class="box" rel="15.00"><span>7</span></li>
        <li id="box8" class="box" rel="10.00"><span>8</span></li>
        <li id="box9" class="box" rel="7.50"><span>9</span></li>
        <li id="box10" class="box" rel="0.01"><span>10</span></li>
        <li id="box11" class="box" rel="300.00"><span>11</span></li>
    </ul>
    <ul class="box-choices">
        <li id="box12" class="box" rel="100.00"><span>12</span></li>
        <li id="box13" class="box" rel="50.00"><span>13</span></li>
        <li id="box14" class="box" rel="0.50"><span>14</span></li>
        <li id="box15" class="box" rel="1.00"><span>15</span></li>
        <li id="box16" class="box" rel="275.00"><span>16</span></li>
        <li id="box17" class="box" rel="200.00"><span>17</span></li>
    </ul>
    <ul class="box-choices">
        <li id="box18" class="box" rel="150.00"><span>18</span></li>
        <li id="box19" class="box" rel="125.00"><span>19</span></li>
        <li id="box20" class="box" rel="250.00"><span>20</span></li>
        <li id="box21" class="box" rel="175.00"><span>21</span></li>
        <li id="box22" class="box" rel="20.00"><span>22</span></li>
    </ul>
</div>

Answer 1

我建議將 disabled 屬性添加到單擊的按鈕中。 所以：

jQuery(document).ready(function($) {

function noop() {};

function chooseBox() {

    $(".box").on( "click", function( event ) {
        $boxID = $(this).attr('id');
        $boxValue = $(this).attr('rel');
        $boxNumber = $boxID.replace('box','');
        $usersBox = $("#users-box span");

        $usersBox.html($boxNumber);
        $usersBox.attr('rel', $boxValue);
        $usersBox.addClass('chosen');

        event.currentTarget.attr('disabled',true)
    });
}

  chooseBox();
});

Answer 2

我意識到針對相同框的唯一方法是使用 1 function 中的所有代碼和一個計數器來執行代碼：

var countBoxes = 0;

    function playingGame() {
        $(".box").on( "click", function( event ) {

            if(countBoxes < 1) {
                $boxID = $(this).attr('id');
                $boxValue = $(this).attr('rel');
                $boxNumber = $boxID.replace('box','');
                $usersBox = $("#users-box span");

                $usersBox.html($boxNumber);
                $usersBox.attr('rel', $boxValue);
                $usersBox.addClass('chosen');

                $(this).addClass('live-chosen');

                countBoxes = 1;
            } else {

Answer 3

如果您只需要按鈕觸發一次單擊事件，則可以使用 Jquery 的one事件綁定。

見片段：

 jQuery(document).ready(function($) { function noop() {}; function chooseBox() { $(".box").one( "click", function( event ) { console.log('I am clicked once'); }); } chooseBox(); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class='box'>111</button> <button class='box'>222</button> <button class='box'>333</button>