点击事件监听获取方法
<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.addEventListener("click", function () {
part.style.display = "flex"
})
})(i)
}
我创建了点击事件以下点击事件，我想获取用户点击以上对应li标签的序号如何操作，
例如点击了<li class="process I">( I )</li>我想获得 5序号
因该如何写
您可以在点击事件的回调函数中使用event对象来获取目标元素的序号。具体代码如下：
var process = document.querySelectorAll(".process");
var part = document.querySelector(".part");
for (var i = 0; i < process.length; i++) {
(function (index) {
process.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.addEventListener("click", function() {
part.style.display = "flex"
var partText = process.innerText
lis.innerHTML = " " + partText + " 欢迎您"
lis.className = "p_title"
companyNav.style.display = 'none'
lis.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.innerText)
})
})(i)
}
我对process进行了循环添加了点击事件，但是我要如何获得用户点击了第几个process[?]呢 只是那个人 发表于 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.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的参数呢？
只是那个人 发表于 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 小助理，如未能正确解答您的问题，请继续追问。
页:
[1]