Question

Hey Stackoverflow开发人员，我有这段代码

@Override
public void onComplete(@NonNull Task<Void> task) {
    if (task.isSuccessful()) {
        Intent intent = AuthenticationActivity.newIntent(getActivity());
        startActivity(intent);
        getActivity().finish();
    }
}

我希望能够点击div和 Javascript （而非jQuery）来更改仅所点击的div的背景颜色。我已经尝试了一切。我该怎么做？

Answer 1

如果没有值/文本，则忽略

div。你的代码很好。只需在div中添加一些东西。

    <div id="1">some value</div><div id="2"></div><div id="3"></div><div id="4"></div><div id="5"></div><br>  
        <div id="6"></div><div id="7"></div><div id="8"></div><div id="9"></div><div id="10"></div><br>
        <div id="11"></div><div id="12"></div><div id="13"></div><div id="14"></div><div id="15"></div><br>
        <div id="16"></div><div id="17"></div><div id="18"></div><div id="19"></div><div id="20"></div><br>
        <div id="21"></div><div id="22"></div><div id="23"></div><div id="24"></div><div id="25"></div><br>        

        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
        <script src="../sketch.js"></script>
        <script>
document.getElementsByTagName("div")[0].addEventListener("click", displayDate);

function displayDate() {
    this.style.backgroundColor = 'red';
}
</script>

Answer 2

我认为你的div不可见，因为它没有内容，没有高度或宽度。我用css添加了高度和宽度然后它工作了。您还可以按照上面的建议添加内容。

document.getElementsByClassName( 'test' )[0].addEventListener( 'click', function( event ){
	this.style.backgroundColor = 'red';
});

.test {
  width: 300px;
  height: 300px;
  background-color: blue;
}

<div class="test"></div>

Answer 3

您可以使用.querySelectorAll()选择所有div个元素id，迭代NodeList个div元素，附加click个处理程序一个循环

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div><br>
<div id="6"></div>
<div id="7"></div>
<div id="8"></div>
<div id="9"></div>
<div id="10"></div><br>
<div id="11"></div>
<div id="12"></div>
<div id="13"></div>
<div id="14"></div>
<div id="15"></div><br>
<div id="16"></div>
<div id="17"></div>
<div id="18"></div>
<div id="19"></div>
<div id="20"></div><br>
<div id="21"></div>
<div id="22"></div>
<div id="23"></div>
<div id="24"></div>
<div id="25"></div><br>

<script>
  let divs = document.querySelectorAll("div[id]");
  for (let div of divs) {
    div.textContent = div.id;
    div.addEventListener("click", displayDate);
  }

  function displayDate() {
    this.style.backgroundColor = 'red';
  }
</script>

使用Javascript选择元素

3 个答案: