Question

看一下上下文：Link to codepen。所以我想做的是当您单击任何框时，它设置了背景图像以表明它已被单击。例如：

<button onclick="plotpoint1()" id="1"></button>
<script>function plotpoint1() {document.getElementById('1').style.background-image = "url('https://example.com/example.png')"

我正在尝试做的事情，但是大约有169个盒子，我是否可以得到一些帮助以拥有一个（或多个）功能，而不必将几乎完全相同的东西放置169次？

Answer 1

如果您的意思是功能，那很容易。

function plotpoint(el) {
  console.log(el);
  el.style.backgroundImage = 'url("https://example.com/example.png")'
}

<button onclick="plotpoint(this)"></button>

如果您是指循环设置按钮，则取决于DB。您必须查看在后端html上生成。

Answer 2

感谢@Marilyn_Gilbert所提供的一些代码，可以“增强”此答案。

.navbar-brand {
  position: absolute;
  top:0px;
  left:100px
}

function plotpoint(el) {
  if (document.getElementById(el).style.backgroundImage == 'url("https://www.wpclipart.com/signs_symbol/alphabets_numbers/outlined_alphabet/blue/lowercase_X_blue.png")') {
    document.getElementById(el).style.backgroundImage = null
  } else {
    document.getElementById(el).style.backgroundImage = 'url("https://www.wpclipart.com/signs_symbol/alphabets_numbers/outlined_alphabet/blue/lowercase_X_blue.png")'
  }
}

button {
  height: 40px;
  width: 40px;
  background-color: white;
  border: solid grey 1px;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
}

.axis {
  border: solid black 1px;
}

div {
  display: inline
}

这是很多代码，我复制粘贴了我的CodePen link to it

有什么方法可以简化交互式坐标平面的代码？

2 个答案: