Как изменить стиль элемента массива зависит от результата функции в JavaScript? - PullRequest
Новая
       2

Как изменить стиль элемента массива зависит от результата функции в JavaScript?

0 голосов
/ 01 мая 2020

Я новичок здесь и изучаю программирование, и у меня есть некоторые сомнения относительно того, как я могу изменить стиль результата каждой функции. Я пытаюсь создать покерную карту, которая меняет массив элементов для иконок, зависит от результата функции, и я не знаю, как это сделать. Не могли бы вы помочь мне, пожалуйста? 

var cardSuits = ['spades', 'diamonds', 'hearts', 'clubs'];
var cardValue = [
    '1','2', '3', '4', 
    '5', '6', '7', '8', 
    '9', '10', 'J', 'Q', 'K'];

const GenerateRandomCard = () => {
    
    let cardSuitsRandom = Math.floor(Math.random() * (cardSuits.length));
    console.log(cardSuitsRandom);

    let cardValueRandom = Math.floor(Math.random()  * (cardValue.length));

    return '<div>' + cardSuits[cardSuitsRandom] + '</div>' +  '<div>' + cardValue [cardValueRandom] + '</div>' + '<div>'+ cardSuits[cardSuitsRandom] +  '</div>'
};

window.onload = () => {
    document.querySelector('#cardMap').innerHTML = GenerateRandomCard();
}
body {
    background-color: green
}

#cardMap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 80px auto 10px auto;
    height: 420px;
    width: 360px;
    background-color: white;
    border-radius: 5px;
}

.allCard {
    font-size: 16px;
}

.heartCard {

}

.spadeCard {

}

.diamondCard {

}

.clubCard {

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" type="text/css" href="index.css">
    <title>Random Card</title>
</head>
<body>
    <div id="cardMap"></div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

enter image description here

Ответы [ 3 ]

0 голосов
/ 01 мая 2020

Вы можете сделать это: 

return '<div class="'+cardSuits[cardSuitsRandom]+' value-'+cardValue[cardValueRandom]+'"></div>;

Таким образом, вы добавляете результаты случайно сгенерированного масти и значения карты к вашим возвращенным классам <div>, а затем соответствующим образом оформляете классы.

0 голосов
/ 01 мая 2020

Чтобы назначить правило CSS для каждой масти, создайте массив имен правил, которые сопоставляются с именами мастей: 

var cardSuits = ['spades', 'diamonds', 'hearts', 'clubs'];
const cardStyles = ['spadeCard', 'diamondCard', 'heartCard', 'clubCard'];

Затем просто добавьте класс в div: 

return `<div class="${cardStyles[cardSuitsRandom]}">` + ...
};

Рабочий пример с несколькими дополнительными улучшениями стиля: 

const cardSuits = ['spades', 'diamonds', 'hearts', 'clubs'];
const cardStyles = ['spadeCard', 'diamondCard', 'heartCard', 'clubCard'];
const cardSymbols = ['♠️', '♦️', '♥️', '♣️'];
const cardValue = ['1','2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];

const GenerateRandomCard = () => {
    
    let cardSuitsRandom = Math.floor(Math.random() * 
      (cardSuits.length));

    let cardValueRandom = Math.floor(Math.random() *
      (cardValue.length));

    return `<div class="${cardStyles[cardSuitsRandom]}">` +
      '<div>' + cardValue[cardValueRandom] + ' ' +
      cardSymbols[cardSuitsRandom] +  '</div></div>'
};

window.onload = () => {
  document.querySelector('#cardMap').innerHTML =
    GenerateRandomCard();
}
body {
    background-color: green
}

#cardMap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 80px auto 10px auto;
    height: 420px;
    width: 360px;
    background-color: white;
    border-radius: 5px;
}

#cardMap > div {
  width: 100%;
  padding: 1rem;
}

.allCard {
    font-size: 16px;
}

.heartCard {
  background-color: #eee;
}

.spadeCard {
  background-color: #ccc;
}

.diamondCard {
  background-color: #aaa;
}

.clubCard {
  background-color: #888;
}
<div id="cardMap" class="allCard"></div>
0 голосов
/ 01 мая 2020

Замените .allCard{} на .card{}

Используйте селектор .card{}, чтобы поместить все общие стили, которые должны быть там, независимо от типа карты.

Так что я думаю 

.card{
    font-size: 16px;
}

А затем в ваш javascript код 

var element = document.getElementById("cardMap");
element.classList.add(cardSuitsRandom);

добавит классы с карточным мастом, поэтому, если вы потянете сердце, класс будет выглядеть как class="card hearts"

А затем сделайте селекторы в вашем css, как

card.spades{}, card.hearts{}, et c

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...