javascript - 抽象重复的 addEventListener ('click' ...函数以优化代码

Question

编辑:寻找非 Jquery 答案

就目前而言，相对于它的简单性而言，这段代码非常长。特定实例之间的唯一区别是指示目标 ID 的数字。有没有一种方法可以使用单个函数实现相同的结果，该函数根据单击的 div 获取变量？

var $ = Sizzle,
p0 = $("#p0")[0];
p1 = $("#p1")[0];
p2 = $("#p2")[0];
p3 = $("#p3")[0];
p4 = $("#p4")[0];
p5 = $("#p5")[0];
p6 = $("#p6")[0];
p7 = $("#p7")[0];
lp0 = $("#productMenu li")[0];
lp1 = $("#productMenu li")[1];
lp2 = $("#productMenu li")[2];
lp3 = $("#productMenu li")[3];
lp4 = $("#productMenu li")[4];
lp5 = $("#productMenu li")[5];
lp6 = $("#productMenu li")[6];
lp7 = $("#productMenu li")[7];


lp0.addEventListener('click',open0,false);
lp1.addEventListener('click',open1,false);
lp2.addEventListener('click',open2,false);
lp3.addEventListener('click',open3,false);
lp4.addEventListener('click',open4,false);
lp5.addEventListener('click',open5,false);
lp6.addEventListener('click',open6,false);
lp7.addEventListener('click',open7,false);



function open0(){
p0.classList.toggle('off');
}

function open1(){
p1.classList.toggle('off');
}
function open2(){
p2.classList.toggle('off');
}

function open3(){
p3.classList.toggle('off');
}
function open4(){
p4.classList.toggle('off');
}

function open5(){
p5.classList.toggle('off');
}
function open6(){
p6.classList.toggle('off');
}

function open7(){
p7.classList.toggle('off');
}

Answer 1

你可以试试这段代码:

$('#productMenu li').on('click', function () {
  var index = $("#productMenu li").index($(this));
  $('#p' + index).toggleClass('off');
});