Question

我是编程新手，我正在尝试做一些对我来说有点过分挑战的事情，所以感谢任何帮助。

我想在显示国际象棋游戏的网站上使用Canvas Chess PGN viewer，让用户可以浏览游戏。我想只为一个棋盘用于不同的游戏，所以我试图创建onclick事件，改变棋盘脚本中的源属性值并使脚本再次运行，但我无法弄清楚如何做到这一点。

这是＆＃34; pgn_uri＆＃34;应通过单击按钮更改的属性，例如当用户点击＆＃34; Round2＆＃34;而不是改为＆＃34; pgn_uri：secondGame＆＃34;等等。具有CHESS.PgnViewer（）函数的脚本也应该再次运行，以便更新棋盘。

<button type="button" name="button" id="round1">Round1</button>
<button type="button" name="button" id="round2">Round2</button>
<button type="button" name="button" id="round3">Round3</button>

<script src="canvaschess\canvaschess-0.1.0.min.js"></script>
<script src="canvaschess\pgnviewer-0.1.0.min.js"></script>

<script type="text/javascript">
var firstGame = 'canvaschess/pgns/round1.pgn';
var secondGame = 'canvaschess/pgns/round2.pgn';
var thirdGame = 'canvaschess/pgns/round3.pgn';
</script>

<script>
var viewer = new CHESS.PgnViewer({
pgn_uri: firstGame,
square_color_dark: '#000',
square_color_light: '#fff',
square_uri_dark: 'canvaschess/img/themes/wood/square_dark.jpg',
square_uri_light: 'canvaschess/img/themes/wood/square_light.jpg',
show_labels: false,
show_tags: true
});
</script>

Answer 1

尝试添加onclick事件例如

保持变量将chessGame称为“全局”，并在按钮上更改其值

$('#round2').onclick(function()
{
chessGame ='secondGame';
});

并在新的CHESS.PgnViewer中传递“chessGame”而不是“firstGame”

Answer 2

在每个按钮中添加点击事件，所以可能是这段代码

// Assume you have global variable name game
$('#btn1, #btn2, #btn3').on('click', function(){
   var btn_clicked = $(this).attr('id'); // get id value
   switch (btn_clicked) {
       case 'btn1':
          game = 'canvaschess/pgns/round1.pgn';
          break;
       case 'btn2':
          game = 'canvaschess/pgns/round2.pgn';
          break;
       case 'btn3':
          game = 'canvaschess/pgns/round3.pgn';
          break;
   }
});

您现在可以将全局变量传递给新的CHESS.PgnViewer

注意：我没有测试这段代码呵呵呵呵！

如何在JavaScript中使用onclick更改函数中的对象属性

2 个答案: