故障嵌入chessboard.js
故障嵌入chessboard.js
提问于 2016-02-24 17:07:00
我想利用chessboard.js提供的漂亮的棋盘。但是，在下载文件夹并输入主页上提供的代码后，它似乎什么也不做。
除了链接到所需的文件夹之外，还有什么东西吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ask A GM</title>
<link rel="stylesheet" type="text/css" href="css/chessboard-0.3.0.css">
<link rel="stylesheet" type="text/css" href="css/chessboard-0.3.0.min.css">
<script type="text/javascript" src="chessboard-0.3.0.js"></script>
<script type="text/javascript" src="chessboard-0.3.0.min.js"></script>
</head>
<body>
<div id="board2" style="width: 400px"></div>
<input type="button" id="startBtn" value="Start" />
<input type="button" id="clearBtn" value="Clear" />
<script>
var board2 = ChessBoard('board2', {
draggable: true,
dropOffBoard: 'trash',
sparePieces: true
});
$('#startBtn').on('click', board2.start);
$('#clearBtn').on('click', board2.clear);
</script>
</body>
</html>回答 3
Stack Overflow用户
回答已采纳
发布于 2016-02-24 17:16:49
您缺少了jQuery，您应该将javascript抛到文档就绪函数中，如下所示：
http://jsbin.com/mapenefesi/edit?html,css,js,output
$(function(){
var board2 = ChessBoard('board2', {
draggable: true,
dropOffBoard: 'trash',
sparePieces: true
});
$('#startBtn').on('click', board2.start);
$('#clearBtn').on('click', board2.clear);
});Stack Overflow用户
发布于 2016-02-24 17:11:48
我不确定您需要相同资源的.css和.min.css以及.js和.min.js引用。
此外，由于您没有引用jQuery (正如其他一些答案中提到的)，您需要更改您的javascript.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ask A GM</title>
<link rel="stylesheet" type="text/css" href="css/chessboard-0.3.0.min.css">
<script type="text/javascript" src="chessboard-0.3.0.min.js"></script>
</head>
<body>
<div id="board2" style="width: 400px"></div>
<input type="button" id="startBtn" value="Start" />
<input type="button" id="clearBtn" value="Clear" />
<script>
var board2 = ChessBoard('board2', {
draggable: true,
dropOffBoard: 'trash',
sparePieces: true
});
document.getElementById('startBtn').click = function() { board2.start; };
document.getElementById('clearBtn').click = function() { board2.clear; };
</script>
</body>
</html>Stack Overflow用户
发布于 2016-02-24 17:16:02
您似乎在使用jQuery选择器(例如，$('#startBtn'))，而不包括jQuery库https://jquery.com/。尝试包括..。
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35608534
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号