jquery如何循环添加事件，有10个li，分别点击出现不同的事件

Posted 2023-04-02

10个li，到底能不能用比较简洁的语句同时绑定点击事件呢？
假设输出的值等于li中的内容

参考技术A $("ul li").each(function(i)

//i就是li的索引， 给不同的i绑定不同的事件即可。

);追问

是这样吗，怎么不行啊，
$("#menu ul li").each(function (i)

$(i).click(function ()
alert(1);
);
);

追答

这个 i 只是索引，你要判断第几个绑定啥事件。

比如为3个绑定click事件,

if(i == 2)
$(this).click(function()
alert(1);
);

本回答被提问者采纳

JS操作

1.循环绑定 => 变量污染

// 页面有一个ul下4个li

// lis.length = 4
for (var i = 0; i < lis.length; i++) {  
    // 给页面元素对象添加一个任意属性(保留索引的属性index)
    lis[i].index = i
    
    // 循环绑定时. i分别是0,1,2,3, 也就给每一个li进行了点击事件的绑定
    lis[i].onclick = function () { 
        // 在事件绑定时,没有执行事件内部的逻辑体, 在绑定结束后, 激活事件时, 才会执行
        // 循环结束后, i值定格在4, 索引在激活事件执行功能时,拿到的i的值全部是4
        // 需求1: 打印li的索引
        // console.log(i)
        // 解决:每一个li都有index属性,取出自己(this)的索引
        console.log(this.index)
        // 需求2: 打印自身内容
        // console.log(lis[i].innerText)
        // 解决: this就能唯一指向当前激活事件的那个li对象
        console.log(this.innerText)
    }
}

2.对象（字典）的增删改查

// 作为字典来使用  *****
var dict = {
    a: "AAA",
    b: "BBB"
}
// 查
console.log(dict.a);
// 改
dict.a = "AAAAA";
console.log(dict);
// 增
dict.c = "CCC";
console.log(dict);
// 删
delete dict.b;
console.log(dict);

// 总结: 只要是js对象, 就可以随意添加属性

3.Math的使用

abs(x)：返回 x 的绝对值
ceil(x)：向上取整
floor(x)：向下取整
max(...n)：求最大值
min(...n)：求最小值
pow(x,y)：返回 x 的 y 次幂
random()：返回 0 ~ 1 之间的随机数

随机数

// 得到区间[min, max]之间的正整数

function randomNum(min, max) {
     return parseInt(Math.random() * (max - min + 1)) + min;   
}

4.字符串的操作

chartAt(n)：指定索引字符，同[n]
concat(str)：将目标字符串拼接到指定字符串之后
indexOf(str)：指定字符串第一次出现的位置
lastIndexOf(str)：指定字符串最一次出现的位置
match(re)：匹配指定正则，结果为数组(可全文匹配)
replace(re, str)：将正则匹配到的字符串替换为指定字符串
search(re)：匹配指定正则，结果为匹配的索引，反之-1
substr(n, m)：从索引n开始，截取m个字符长度(m省略代表截取到最后)
substring(n, m)：从索引n开始，截取到索引m(m省略代表截取到最后)
slice(n, m)：同substring(n, m)
split(re)：以指定正则将字符串拆分为数组
toUpperCase()：转换为大写
toLowerCase()：转换为小写
trim()：去除首尾空白字符

// 1.指定索引下的字符
var s = "abcdef123456呵呵哈哈";
console.log(s.charAt(3));

// 2.判断是否存在: 呵呵是否在字符串中
// -1代表不存在, 反正就是存在(的索引)
console.log(s.indexOf("呵"));  // 12
console.log(s.lastIndexOf("呵")); // 13

// 3.替换
var newS = s.replace("abc", "ABC");
console.log(s);
console.log(newS);
// 总结: 字符串为不可变类型, 如果某操作要改变字符串, 该操作一定拥有返回值

// 4.裁剪 slice(n, m) 从索引n开始截取到索引m之前
newS = s.slice(0, 3);
console.log(newS);

// 5.拆分数组
var ss = "123 456 abc def";
var arr = ss.split(" ");
console.log(arr)

验证

5.数组操作

indexOf(ele)：指定元素第一次出现的位置
lastIndexOf(ele)：指定元素最一次出现的位置
reverse()：反转数组
join(str)：以指定字符串连接成字符串
sort(): 排序
filter(function(value, index){ return true | false})：过滤器

增删改查
push(ele)：从尾加
unshift(ele)：从头加

pop()：从尾删
shift()：从头删

splice(begin, length, ...eles)：完成增删改
// begin开始索引
// length长度
// 新元素们(可以省略)

var arr = [3, 5, 1, 2, 4];
console.log(arr); // [3, 5, 1, 2, 4]

// 1.反转
arr.reverse();
console.log(arr); // [4, 2, 1, 5, 3]

// 2.排序
arr.sort();
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr.reverse()); // [5, 4, 3, 2, 1]

// 3.判断元素是否存在 (不等于-1就是存在)
console.log(arr.indexOf(5));

// 4.拼接成字符串
var ss = arr.join("@");
console.log(ss);  // [email protected]@[email protected]@1

// 5.过滤器 (保留符合条件的结果)
var newArr = arr.filter(function (ele) {  // 回调函数的回调次数有数组的个数决定
    // filter回调了三个参数: ele, index, sourcerr

    // 偶数
    if (ele % 2 == 0) {
        // 满足过滤条件
        return true;
    }
    // 不满足过滤条件
    return false;
});
// 满足过滤条件的就会添加到新数组中保留
console.log(newArr) // [4, 2]

/*原理
arr.filter(fn) {
    var newArr = [];
    for (var i = 0; i < this.length; i++) {
        var res = fn(this[i], i, this);
        if (res == true) {
            newArr.push(res)
        }
    }
    return newArr;
}
*/

// 查
// arr[index]

// 改
// arr[index] = newDate;

// 增
// 从尾加: push()
// 从头加: unshift()

// 删
// pop()：从尾删
// shift()：从头删

// splice(begin, length, ...eles);
// begin开始的索引
// length操作的长度
// 替换为的新元素们(可以省略)

// 增
// 从索引3之前操作0位,替换为10 => 在索引3插入10
a.splice(3, 0, 10); // [4, 3, 5, 10, 1, 2]
console.log(a);

// 在索引0之前操作0位,替换为1,2 => 在首位添加1和2
a.splice(0, 0, 1, 2);
console.log(a); // [1, 2, 4, 3, 5, 10, 1, 2]

// 改
// 在索引末尾之前操作1位,替换为20 => 在末位修改为20
a.splice(a.length - 1, 1, 20);  // [1, 2, 4, 3, 5, 10, 1, 20]
console.log(a); // [1, 2, 4, 3, 5, 10, 1, 20]

// 删
a.splice(2, 3);
console.log(a); // [1, 2, 10, 1, 20]

验证