[已解决]点击事件监听获取方法

只是那个人

<ul class="process-nav">
                <li class="process P">( P )</li>
                <li class="process W">( W )</li>
                <li class="process T">( T )</li>
                <li class="process A">( A )</li>
                <li class="process R">( R )</li>
                <li class="process I">( I )</li>
                <li class="process L">( L )</li>
              </ul>


我有以上HTML

1. var process = document.querySelectorAll(".process")
   
2. var part = document.querySelector(".part")
   
3. 
   
4.     for (var i = 0; i < process.length; i++) {
   
5.         (function (index) {
   
6.             process[index].addEventListener("click", function () {
   
7.                 part.style.display = "flex"
   
8. 
   
9.             })
   
10.         })(i)
    
11.     }

复制代码

我创建了点击事件以下点击事件，我想获取用户点击以上对应li标签的序号如何操作，
例如点击了<li class="process I">( I )</li>  我想获得 5序号

因该如何写

最佳答案

月排行榜 / 总排行榜

FishC

2024-3-12 15:11:30

只是那个人 发表于 2024-03-12 15:11
我如何在这个作用域以外调用index的参数呢？

如果您希望在回调函数所在的作用域以外访问`index`参数，可以将`index`保存在一个变量中，以便后续使用。具体代码如下：

1. var process = document.querySelectorAll(".process");
   
2. var part = document.querySelector(".part");
   
3. var clickedIndex; //定义一个变量来保存点击的序号
   
4. for (var i = 0; i < process.length; i++) {
   
5.   (function(index) {
   
6.     process.addEventListener("click", function() {
   
7.       clickedIndex = index; //将点击的序号赋值给变量clickedIndex
   
8.       console.log("用户点击了第" + (clickedIndex + 1) + "个process");
   
9. 
   
10.       // 其他操作...
    
11.     });
    
12.   })(i);
    
13. }
    
14. 
    
15. // 在这之后的代码中可以使用clickedIndex变量来获取点击的序号

复制代码

在上面的代码中，我们在循环外部声明了一个`clickedIndex`变量，然后在点击事件的回调函数中将`index`赋值给`clickedIndex`，这样就可以在回调函数以外的作用域中使用`clickedIndex`了。请注意，点击事件发生之前，`clickedIndex`的值将是`undefined`，只有当用户点击了`.process`元素后，`clickedIndex`才会被赋值为相应的序号。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC

您可以在点击事件的回调函数中使用event对象来获取目标元素的序号。具体代码如下：

1. var process = document.querySelectorAll(".process");
   
2. var part = document.querySelector(".part");
   
3. 
   
4. for (var i = 0; i < process.length; i++) {
   
5.     (function (index) {
   
6.         process[index].addEventListener("click", function (event) {
   
7.             // 获取被点击标签的序号
   
8.             var clickedIndex = index;
   
9.             console.log(clickedIndex);
   
10.             
    
11.             part.style.display = "flex";
    
12.         });
    
13.     })(i);
    
14. }

复制代码

在上面的代码中，我们给每个`.process`元素添加了点击事件监听，并在回调函数中通过`index`参数记录了被点击标签的序号。你可以将序号保存到变量中，或者进行其他的操作。

另外，需要注意的是，这里使用了立即调用函数表达式(IIFE)来解决循环绑定事件时的作用域问题，确保每个回调函数拥有自己独立的`index`值。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

只是那个人

FishC 发表于 2024-3-11 11:49
您可以在点击事件的回调函数中使用event对象来获取目标元素的序号。具体代码如下：

1.     var process = document.querySelectorAll(".process")
   
2.     var part = document.querySelector(".part")
   
3.     for (var i = 0; i < process.length; i++) {
   
4.         (function (index) {
   
5.             process[index].addEventListener("click", function() {
   
6.                 part.style.display = "flex"
   
7.                 var partText = process[index].innerText
   
8.                 lis[0].innerHTML = "&#160;&#160;&#160;&#160;&#160;" + partText + " 欢迎您"
   
9.                 lis[0].className = "p_title"
   
10.                 companyNav.style.display = 'none'
    
11.                 lis[1].classList.remove("textClass")
    
12.                 part.classList.remove("partAcc")
    
13.                 partBtn1.classList.remove("partBcc")
    
14.                 partBtn2.classList.remove("partBcc")
    
15.                 partBtn1.className = "part_bnt1"
    
16.                 partBtn2.className = "part_bnt2"
    
17.                 partBtn1.innerHTML = "生 产 工 艺 介 绍"
    
18.                 partBtn2.innerHTML = "工 序 特 色 活 动"
    
19.                 console.log(lis[0].innerText)
    
20.             })
    
21.         })(i)
    
22.     }
    

复制代码

我对process进行了循环添加了点击事件，但是我要如何获得用户点击了第几个process[?]呢

FishC

只是那个人 发表于 2024-03-12 15:09
var process = document.querySelectorAll(".process" ...

您可以在点击事件的回调函数中使用`index`参数获取用户点击的是第几个`.process`元素。具体代码如下：

1. var process = document.querySelectorAll(".process");
   
2. var part = document.querySelector(".part");
   
3. 
   
4. for (var i = 0; i < process.length; i++) {
   
5.   (function(index) {
   
6.     process[i].addEventListener("click", function() {
   
7.       var clickedIndex = index;
   
8.       console.log("用户点击了第" + (clickedIndex + 1) + "个process");
   
9.       
   
10.       // 其他操作...
    
11.     });
    
12.   })(i);
    
13. }

复制代码

在回调函数中，我们通过`index`参数获取到用户点击的是第几个`.process`元素，并将序号加1打印出来。这样你就可以知道用户点击的是第几个元素了。请注意，序号是从0开始的，所以为了更直观，我们在输出时将序号加1。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

只是那个人

FishC 发表于 2024-3-12 15:10
您可以在点击事件的回调函数中使用`index`参数获取用户点击的是第几个`.process`元素。具体代码如下：
...

我如何在这个作用域以外调用index的参数呢？

FishC

只是那个人 发表于 2024-03-12 15:11
我如何在这个作用域以外调用index的参数呢？

如果您希望在回调函数所在的作用域以外访问`index`参数，可以将`index`保存在一个变量中，以便后续使用。具体代码如下：

1. var process = document.querySelectorAll(".process");
   
2. var part = document.querySelector(".part");
   
3. var clickedIndex; //定义一个变量来保存点击的序号
   
4. for (var i = 0; i < process.length; i++) {
   
5.   (function(index) {
   
6.     process.addEventListener("click", function() {
   
7.       clickedIndex = index; //将点击的序号赋值给变量clickedIndex
   
8.       console.log("用户点击了第" + (clickedIndex + 1) + "个process");
   
9. 
   
10.       // 其他操作...
    
11.     });
    
12.   })(i);
    
13. }
    
14. 
    
15. // 在这之后的代码中可以使用clickedIndex变量来获取点击的序号

复制代码

在上面的代码中，我们在循环外部声明了一个`clickedIndex`变量，然后在点击事件的回调函数中将`index`赋值给`clickedIndex`，这样就可以在回调函数以外的作用域中使用`clickedIndex`了。请注意，点击事件发生之前，`clickedIndex`的值将是`undefined`，只有当用户点击了`.process`元素后，`clickedIndex`才会被赋值为相应的序号。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。