屏幕上有9个div标签按1-9顺序排列,如何获取鼠标点击的div的序号
时间: 2024-02-13 11:06:00 浏览: 19
你可以为每个 `<div>` 标签添加一个点击事件监听器,当用户点击某个 `<div>` 标签时,触发点击事件并获取该标签的序号,可以通过以下步骤实现:
1. 给每个 `<div>` 标签添加一个点击事件监听器,比如可以使用 `addEventListener` 方法添加点击事件监听器,示例代码如下:
```javascript
const divs = document.querySelectorAll('div');
divs.forEach((div, index) => {
div.addEventListener('click', () => {
console.log(`clicked on div ${index + 1}`);
});
});
```
以上代码使用 `querySelectorAll` 方法获取所有 `<div>` 标签,并使用 `forEach` 方法遍历每个标签,为每个标签添加一个点击事件监听器。当用户点击某个标签时,打印该标签的序号。
2. 在点击事件监听器中获取点击的标签序号,可以使用 `indexOf` 方法或者 `Array.from` 方法获取点击标签在所有标签中的索引,示例代码如下:
```javascript
const divs = document.querySelectorAll('div');
divs.forEach((div, index) => {
div.addEventListener('click', () => {
const clickedIndex = Array.from(divs).indexOf(div);
console.log(`clicked on div ${clickedIndex + 1}`);
});
});
```
以上代码在点击事件监听器中使用 `Array.from` 方法将 NodeList 转换为数组,然后使用 `indexOf` 方法获取点击标签在数组中的索引,最后打印该标签的序号。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)