javascript - 根据 css 属性选择元素

Question

const display = document.getElementsByClassName('display')[0];
var squares = [];
let score = 0;



function grid() {
    for(let i = 0; i < 6; i++) {
        for(let j = 0; j < 4; j++) {
             square = document.createElement('div');
            square.className = 'square';
            display.appendChild(square);
            
        }
    }
};

grid();


function StartGame() {
    var randomElement = rando(document.querySelectorAll(".square")).value.style.background = "white";
}

StartGame();

const whiteSquares = $('div.square').filter(function(){
    return $(square).css("background") == "white"
  })



function counter() {
    score = score + 1;
    console.log(score);
}

$(whiteSquares).on("click", (score) => {
    counter()
})

以上是我正在处理的一些代码。我正在尝试这样做，因此当单击随机元素时，它将导致函数运行。当我点击白框时什么都没有发生。由于它们都有相同的类名，我无法根据类名创建 if 语句，所以我尝试使用 jquery 来根据它的 css 元素选择它。任何帮助，将不胜感激！

标签： javascriptjquerycssfunctiondebugging

Answer 1

我不是很清楚你的要求。这可能会帮助您继续前进

const display = document.getElementsByClassName('display')[0];
let score = 0;

function grid() {
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 4; j++) {
      const square = document.createElement('div');
      square.setAttribute("id", `r${i}_${j}`);
      square.className = 'square';
      display.appendChild(square);

    }
  }
}

function StartGame() {
  const squares = [...document.querySelectorAll(".square")];
  const randInt = Math.floor(Math.random() * squares.length);
  squares[randInt].style.background = "white";
}

function counter() {
  score = score + 1;
  console.log(score);
}

grid();
StartGame();

const whiteSquares = [...document.querySelectorAll(".square")].filter((sq) => sq.style.background == "white");

whiteSquares.forEach((sq) => {
  sq.addEventListener("click", function() {
    counter();
  });
});

.display {
  display: flex;
  width: 160px;
  flex-wrap: wrap;
}
.square {
  border: 1px dotted black;
  width: 30px;
  height: 30px;
  margin: 4px;
  background-color: black;
}

<div class="display">
</div>