Question

我正在尝试写一些SASS，它将根据所选内容来更改选择框背景图像，但是我不确定是否可能！

这里是我的尝试方式，我将背景图片放在类似这样的选项的data属性中

<select name="language_selector" id="language-selector">
  <option value="english" data-background-image="img/england.svg">English</option>
  <option value="spanish" selected data-background-image="img/spain.svg">Spanish</option>
</select>

然后我正尝试使用SASS来基于这样的选定选项设置选择框的值

select {
 height: 45px;
 width: 300px;
 border-radius: 4px;
 font-family:$font;
 font-weight: 400;
 -webkit-font-smoothing: antialiased;
 -webkit-appearance: none;
 -moz-appearance: none;
  appearance: none;
  padding-left: 40px;
  position:relative;
  background-repeat: no-repeat;
  background-position-x: 10px;
  background-position-y: center;
  background-size: 18px;
  option:active ~ & {
     background-image:url(attr(data-background-image));
  }
 }

像这样可能吗？我如何获得option属性的值并将其应用于选择框？

我知道我可以为此使用Javascript，但目的是纯粹使用CSS / SASS而不是使用任何JS。

Answer 1

我很确定，您将必须使用

//pseudo sass
parent if child(with id='') has attribute selected {
  background-img: '.../.../...';
}

但是根据孩子的内部来选择父母不是可能..所以必须使用javascript。

 option:active ~ & {
     background-image:url(attr(data-background-image));
  }

像这样，您只会选择选项本身，这可能不是您的目标吧？

Answer 2

您可以使用

function Board(width, height) {
    this.width = width;
    this.height = height;
    this.chartBoard = [];

    // Création du plateau logique
    for (var i = 0; i < this.width; i++) {
        const row = [];
        this.chartBoard.push(row);
        for (var j = 0; j < this.height; j++) {
            const col = {};
            row.push(col);
        }
    }
}
let board = new Board(10, 10);
console.log(board);

// CONTEXT OF THE CANVAS
const ctx = $('#board').get(0).getContext('2d');

Board.prototype.drawBoard = function () {
    for (var i = 0; i < this.width; i++) {
        for (var j = 0; j < this.height; j++) {
            ctx.beginPath();
            ctx.strokeStyle = 'black';
            ctx.strokeRect(j * 64, i * 64, 64, 64);
            ctx.closePath();
        }
    }
};

board.drawBoard();



Board.prototype.test = test;

function test() {
    console.log(this);
}


// OBJECT TO DRAW
function Obstacle(name, sprite) {
    this.name = name;
    this.sprite = sprite;
}

const lava = new Obstacle("Lave", "assets/lave.png");
const lava1 = new Obstacle("Lave1", "assets/lave.png");
const lava2 = new Obstacle("Lave2", "assets/lave.png");
const lava3 = new Obstacle("Lave3", "assets/lave.png");
const lava4 = new Obstacle("Lave4", "assets/lave.png");
const lava5 = new Obstacle("Lave5", "assets/lave.png");
const lava6 = new Obstacle("Lave6", "assets/lave.png");
const lava7 = new Obstacle("Lave7", "assets/lave.png");
const lava8 = new Obstacle("Lave8", "assets/lave.png");
const lava9 = new Obstacle("Lave9", "assets/lave.png");
const lavaArray = [lava, lava1, lava2, lava3, lava4, lava5, lava6, lava7, lava8, lava9];


// FUNCTION TO DRAW

Board.prototype.setPiece = function (piece) {

    let randomX = Math.floor(Math.random() * board.width);
    let randomY = Math.floor(Math.random() * board.height);

    let drawX = randomX * 64;
    let drawY = randomY * 64;


    if (randomX >= this.width || randomY >= this.height) {
        throw new Error('Pièce hors limite');
    }

    if (piece instanceof Obstacle) {

        if (!(this.chartBoard[randomY][randomX] instanceof Obstacle)) {
            this.chartBoard[randomY][randomX] = piece;

            // CODE TO DRAW, BUG DOESN'T WORK
            ctx.fillRect(drawX, drawY,64,64);
            let image = Obstacle.sprite;
            ctx.drawImage = (image, drawX, drawY);
        }
    } 

    } else {
        throw new Error('Pièce non valide');
    }
};

Board.prototype.setObstacles = function () {
    for (let lava of lavaArray) {

        const obstacle = board.setPiece(lava);
    }
};
board.setObstacles();

根据选项属性更改选择背景图片

2 个答案: