Question

我正在尝试制作一个不交易或不交易的游戏，在该游戏中，用户第一次加载页面时，必须单击一个框将其选中。之后，他们将通过单击各个框来进行操作。

但是，我不知道如何使我的选择框功能仅运行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函数中的所有代码以及一个计数器来执行代码：

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

如果只需要一次触发click事件的按钮，则可以使用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>

点击功能，仅触发一次，再也不会触发

3 个答案: