Question

我的问题的一点背景：

当用户将能够创建从正方形到另一个正方形的路径时，我制作基于棋盘的游戏，就是当点击一个正方形时，无论指针是否指针都应该保持突出显示已经结束然后离开它。似乎当点击方块然后指针离开它时，.hover（）的handlerIn改变了方形路径类型属性的状态，使得当指针进入并离开方形时，方形可能不合适。

这是我到目前为止所得到的：

＆＃13;

$(function() {
	$('td.soccer-field').click(function(){
			if ($('#dice1').text() != '' && $('#dice2').text() != '') {
				if ($("[path-type='begin-path']").length == 0) {
					$(this).attr('path-type','begin-path');
				} else if ($("[path-type='begin-path']").length && $(this).attr('path-type') != 'end-path'){
					$(this).attr('path-type','end-path');
					$('[path-type="selecting-actual-path"]').attr('path-type','actual-path');
				} else if ($(this).attr('path-type') == 'end-path'){
					$(this).attr('path-type','');
				}; 
			}
		});


	$('td.soccer-field').hover(
		function () {
			if ($('#dice1').text() != '' && $('#dice2').text() != '') {
				if ($("[path-type='begin-path']").length == 0) {
					$(this).attr('path-type','select-begin-path');
				} else if ($(this).attr('path-type') == ''){
					var actualCell = $(this).attr('id') + $(this).parent().attr('id');
					var cell, distance,dicesResult =  parseInt($('#dice1').text())+ parseInt($('#dice2').text());
					$("[path-type*='path']").each(function  () {
						cell = $(this).attr('id') + $(this).parent().attr('id');
						distance = new Board().calculateDistanceSquares(actualCell,cell);
						if (distance == 1  && $("[path-type='selecting-actual-path']").length < (dicesResult -2))
						{
								$(this).attr('path-type','selecting-actual-path');
								return false;
						}
					});
				}	
			};
		},function () {
			if ($(this).attr('path-type') == 'selecting-actual-path' || $(this).attr('path-type') == 'select-begin-path') {
					$(this).attr('path-type','');
			}
		});

	$('#diceRoller').click(function() {
		$('#dice1').text(Math.floor(Math.random()*6)+1);
		$('#dice2').text(Math.floor(Math.random()*6)+1);
		$(this).attr('disabled',true);
	});
});

//function Board(playerTurn, piecesPosition, gamePhase, gameBegginingType, container)
function Board(){
	this.buildBoard = function  (container) {
		var board = $('<table></table>').attr('id','board');
		var row, cell,containerHeight,containerWidth;
		for (var i=0; i<10; i++){
			row = $('<tr></tr>').attr('id',i+1);
			for (var j=0; j<20; j++){
				cell = $('<td></td>');
				cell.attr('path-type','');
				if ((j == 0 || j == 19) && (i >= 3) && (i <= 6)) {
					cell.addClass('behind-goal');
				} 
				else if ((j > 0) && (j < 19)){
					cell.attr('id',String.fromCharCode(j+96));
					cell.addClass("soccer-field");
				};
				row.append(cell);
			}
			board.append(row);
		}
		$('#'+container).append(board);
	};

	this.calculateHorizontalDistance = function (sq1,sq2) {
		var column1 = sq1.substring(0,1).charCodeAt(0);
		var column2 = sq2.substring(0,1).charCodeAt(0);
		return ( Math.abs(column1-column2) );
	};

	this.calculateVerticalDistance = function (sq1, sq2) {
		var row1 = parseInt(sq1.substring(1));
		var row2 = parseInt(sq1.substring(1));
		return ( Math.abs(row1-row2) );
	};

	this.calculateDistanceSquares = function(sq1, sq2){
		return(this.calculateVerticalDistance(sq1,sq2)+this.calculateHorizontalDistance(sq1,sq2));
	}
}

var board = new Board();
	board.buildBoard('left');

＆＃13;

#left table{
	width: 60em;
	height: 25em;
	border:0.2em solid black;
	border-collapse:collapse;
}

#left table tr{
	height: 2.5em;
	
}

#left table tr td{
	width: 3.33em;
}


td.soccer-field{
	border: 0.1em solid black;
}

td.behind-goal{
	background-color: #F8FAB4;
}

td[path-type*="path"]{
	border: 0.15em solid #F8FAB4;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boardContainer">
	<div id="right">
		<p id="dice1"></p><p id="dice2"></p> 
		<button id="diceRoller">Lanzar Dados</button>
	</div>
	
	<div id="left"></div>
</div>

＆＃13;

一点帮助将非常感激

Answer 1

要防止您在元素被点击时添加属性，稍后在第二次单击时将其删除。现在在悬停处理程序中检查元素上的这个属性，如果它存在（或设置），那么只要从处理程序返回就不要做任何事情。

像这样的东西

$('td.soccer-field').click(function(){
        $(this).data('clicked', !!$(this).data('clicked'));
        ...
        ...
    });


$('td.soccer-field').hover(
    function () {
      if ($(this).data('clicked')) return;
      ...
      ...
    },
    function () {
      if ($(this).data('clicked')) return;
      ...
      ...
    });

.hover（）似乎覆盖了.click（）

1 个答案: