首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >故障嵌入chessboard.js

故障嵌入chessboard.js
EN

Stack Overflow用户
提问于 2016-02-24 17:07:00
回答 3查看 196关注 0票数 0

我想利用chessboard.js提供的漂亮的棋盘。但是,在下载文件夹并输入主页上提供的代码后,它似乎什么也不做。

除了链接到所需的文件夹之外,还有什么东西吗?

代码语言: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.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>
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-02-24 17:16:49

您缺少了jQuery,您应该将javascript抛到文档就绪函数中,如下所示:

http://jsbin.com/mapenefesi/edit?html,css,js,output

代码语言:javascript
复制
  $(function(){
    var board2 = ChessBoard('board2', {
      draggable: true,
      dropOffBoard: 'trash',
      sparePieces: true
    });
    $('#startBtn').on('click', board2.start);
    $('#clearBtn').on('click', board2.clear);
  });
票数 2
EN

Stack Overflow用户

发布于 2016-02-24 17:11:48

我不确定您需要相同资源的.css.min.css以及.js.min.js引用。

此外,由于您没有引用jQuery (正如其他一些答案中提到的),您需要更改您的javascript.

代码语言: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>
票数 2
EN

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>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35608534

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档