Как установить случайный цвет (скажем, зеленый) после генерации случайной позиции

Question

Так что я решаю проблему рыцарского тура, и я хочу установить зеленый цвет на поле Рыцарей «первый ход» = «первое появление».

Это то, что он выглядит следующим образом:

У меня есть таблица 8x8 и мои рыцари появляются случайным образом на доске, и я не могу понять, как установить свой первый внешний вид, чтобы быть зелеными.

var boardSize = 8; 
var currentCoords = {x: Math.round(Math.random() * 7), y: Math.round(Math.random() * 7)}; 
var count = 1; 

Это генерирующая часть.

$('table tr').eq(currentCoords.y).find('td').eq(currentCoords.x).html('<span style="font-size:50px;color:blue;margin-left:10%;">&#9816;</span>'); 

И вот когда рыцарь появляется на доске.

Если бы кто-нибудь мог помочь, я был бы признателен. Спасибо заранее.

Желаемый результат:

Answer 1

Итак, вы хотите, чтобы фон квадрата быть зеленым. Скриншот «желаемого результата» пояснил, что, спасибо.

Вы уже знаете, как получить ячейку таблицы, чтобы поставить рыцаря в ячейку.

Вы должны использовать подобный JQuery вызов, чтобы получить ячейку:

$('table tr').eq(currentCoords.y).find('td').eq(currentCoords.x) 

А потом вместо .html() вызова, который вы используете, чтобы поместить рыцарь, вам нужно использовать .css() вызов, чтобы изменить стили самой ячейки.

стиль вам нужно установить это background, так что вы бы сделать это:

$('table tr').eq(currentCoords.y).find('td').eq(currentCoords.x).css({'background':'green'}); 

непосредственно перед или после вашей линии на место рыцаря.

Для бонусной точки, поскольку между двумя строками кода много дублированного кода, вы можете упростить ситуацию, перемещая часть jQuery, чтобы получить ячейку таблицы в отдельную переменную, а затем ссылаясь на нее дважды, например так:

var $firstCell = $('table tr').eq(currentCoords.y).find('td').eq(currentCoords.x); 
$firstCell.css({'background':'green'}); 
$firstCell.html('<span style="font-size:50px;color:blue;margin-left:10%;">&#9816;</span>'); 

Надеюсь, что это поможет.