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

只是那个人

<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

var process = document.querySelectorAll(".process")
 var part = document.querySelector(".part")

    for (var i = 0; i < process.length; i++) {
        (function (index) {
            process[index].addEventListener("click", function () {
                part.style.display = "flex"

            })
        })(i)
    }

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

因该如何写

最佳答案

月排行榜 / 总排行榜

FishC

2024-3-12 15:11:30

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

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

var process = document.querySelectorAll(".process");
var part = document.querySelector(".part");
var clickedIndex; //定义一个变量来保存点击的序号
for (var i = 0; i < process.length; i++) {
  (function(index) {
    process.addEventListener("click", function() {
      clickedIndex = index; //将点击的序号赋值给变量clickedIndex
      console.log("用户点击了第" + (clickedIndex + 1) + "个process");

      // 其他操作...
    });
  })(i);
}

// 在这之后的代码中可以使用clickedIndex变量来获取点击的序号

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

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

跳转到最佳答案楼层

FishC

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

var process = document.querySelectorAll(".process");
var part = document.querySelector(".part");

for (var i = 0; i < process.length; i++) {
    (function (index) {
        process[index].addEventListener("click", function (event) {
            // 获取被点击标签的序号
            var clickedIndex = index;
            console.log(clickedIndex);
            
            part.style.display = "flex";
        });
    })(i);
}

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

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

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

只是那个人

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

    var process = document.querySelectorAll(".process")
    var part = document.querySelector(".part")
    for (var i = 0; i < process.length; i++) {
        (function (index) {
            process[index].addEventListener("click", function() {
                part.style.display = "flex"
                var partText = process[index].innerText
                lis[0].innerHTML = "     " + partText + " 欢迎您"
                lis[0].className = "p_title"
                companyNav.style.display = 'none'
                lis[1].classList.remove("textClass")
                part.classList.remove("partAcc")
                partBtn1.classList.remove("partBcc")
                partBtn2.classList.remove("partBcc")
                partBtn1.className = "part_bnt1"
                partBtn2.className = "part_bnt2"
                partBtn1.innerHTML = "生 产 工 艺 介 绍"
                partBtn2.innerHTML = "工 序 特 色 活 动"
                console.log(lis[0].innerText)
            })
        })(i)
    }

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

FishC

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

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

var process = document.querySelectorAll(".process");
var part = document.querySelector(".part");

for (var i = 0; i < process.length; i++) {
  (function(index) {
    process[i].addEventListener("click", function() {
      var clickedIndex = index;
      console.log("用户点击了第" + (clickedIndex + 1) + "个process");
      
      // 其他操作...
    });
  })(i);
}

在回调函数中，我们通过`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`保存在一个变量中，以便后续使用。具体代码如下：

var process = document.querySelectorAll(".process");
var part = document.querySelector(".part");
var clickedIndex; //定义一个变量来保存点击的序号
for (var i = 0; i < process.length; i++) {
  (function(index) {
    process.addEventListener("click", function() {
      clickedIndex = index; //将点击的序号赋值给变量clickedIndex
      console.log("用户点击了第" + (clickedIndex + 1) + "个process");

      // 其他操作...
    });
  })(i);
}

// 在这之后的代码中可以使用clickedIndex变量来获取点击的序号

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

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