Question

我正在创建一个带有瓷砖的电路板，可以点击它来改变颜色。我有一个“清除板”按钮，可以有效地清除板，所以所有的瓷砖都是白色的，但由于某种原因，按钮只能在每次重新加载页面后第二次点击。我已经尝试将JavaScript包装在文档就绪函数中，但这没有帮助。如何在重新加载后第一次点击它？

HTML：

<h1 class="title">Wacky Painter</h1>
    <div class="easel">
    </div>
    <form class="clear_board">
        <button type="button" id="clear_button" class="btn" onclick="clearBoard()">Clear Board</button>
    </form>

CSS：

body {
  font-family: sans-serif;
  color: #ff757a;
}

.easel {
  width: 300px;
  outline: #c8c8c8 5px solid;
  margin: 0 auto;
}

.square {
  width: 20px;
  height: 20px;
  outline: thin solid #c8c8c8;
  display: inline-block;
  margin-top:-2px;
}

form {
  margin: 10px auto;
}

.title {
  margin: 0 auto;
  text-align: center;
  padding-bottom: 20px;
}

JavaScript（使用jQuery）：

window.setUpEasel = function() {
    var squareString = "";
    for(var i=0; i < 195; i++) {
        squareString+='<div class="square"></div>';
    }
    $('.easel').append(squareString)
}

window.giveColor = function() {
    $('.easel').on('click', '.square', function() {
        var letters = '0123456789ABCDEF'.split('');
        var randomColor = '#';
        for (var i = 0; i < 6; i++ ) {
            randomColor += letters[Math.round(Math.random() * 15)];
        }
        $($(this)).css('background-color', randomColor);
    })
}
window.clearBoard = function() {
    $('#clear_button').on('click', function () {
        $('.square').css('background-color', 'white');
    })
}

    $(function () {
        setUpEasel();
        giveColor();
    });

这是一个有效的jsfiddle：http://jsfiddle.net/MichelleGlauser/yz6mdx1f/1/

Answer 1

您不必在清除按钮上设置jQuery点击事件处理程序，直到您单击按钮（使用按钮属性中指定的事件处理程序）。试试这个：

// code above stays the same

// Adjust so that it is merely responsible for clearing the background
window.clearBoard = function() {
    $('.square').css('background-color', 'white');
};

$(function() {
    setUpEasel();
    giveColor();

    // Assign the click handler on DOM-ready
    $('#clear_button').on('click', function () {
        clearBoard();
    });
});

最后，从按钮标记中删除内联onclick属性。

DEMO

按钮仅在重新加载后第二次单击时起作用

1 个答案: