61,129
社区成员
发帖
与我相关
我的任务
分享jquery如何获得其他元素属性的序号
<ul class="mode">
<li class="mode_li"><p>white</p></li>
<li class="mode_li"><p>black</p></li>
<li class="mode_li active"><p>red</p></li>
</ul>
<ul class="type">
<li class="type_li">type1</li>
<li class="type_li active">type2</li>
<li class="type_li">type3</li>
</ul>
大家好，我的要求是这样的。鼠标点击mode_li的时候读取type_li active的type值，鼠标点击type_li的时候读取mode_li active的p内的值，谢谢大家了
...全文
请发表友善的回复…
发表回复
sxysoft_csdn 2021-01-28
- 打赏
- 举报
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获得其他元素元素文本信息 xinbiancheng.cn</title>
<style>
.type_li,
p {
border: 1px solid red;
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<ul class="mode">
<li class="mode_li">
<p>white</p>
</li>
<li class="mode_li">
<p>black</p>
</li>
<li class="mode_li active">
<p>red</p>
</li>
</ul>
<ul class="type">
<li class="type_li">type1</li>
<li class="type_li active">type2</li>
<li class="type_li">type3</li>
</ul>
</body>
<script>
// 点击mode_li 获取 .type_li.active
mls = document.querySelectorAll('.mode_li')
for (var i = 0; i < mls.length; i++) {
mls[i].onclick = function () {
ta = document.querySelector('.type_li.active')
alert(ta.innerText)
}
}
// type_li 获取 .mode_li.active
tls = document.querySelectorAll('.type_li')
for (var i = 0; i < tls.length; i++) {
tls[i].onclick = function () {
mp = document.querySelector('.mode_li.active p')
alert(mp.innerText)
}
}
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获得其他元素元素文本信息 xinbiancheng.cn</title>
<style>
.type_li,
p {
border: 1px solid red;
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<ul class="mode">
<li class="mode_li">
<p>white</p>
</li>
<li class="mode_li">
<p>black</p>
</li>
<li class="mode_li active">
<p>red</p>
</li>
</ul>
<ul class="type">
<li class="type_li">type1</li>
<li class="type_li active">type2</li>
<li class="type_li">type3</li>
</ul>
</body>
<script>
// 点击mode_li 获取 .type_li.active
mls = document.querySelectorAll('.mode_li')
for (var i = 0; i < mls.length; i++) {
mls[i].onclick = function () {
ta = document.querySelector('.type_li.active')
alert(ta.innerText)
}
}
// type_li 获取 .mode_li.active
tls = document.querySelectorAll('.type_li')
for (var i = 0; i < tls.length; i++) {
tls[i].onclick = function () {
mp = document.querySelector('.mode_li.active p')
alert(mp.innerText)
}
}
</script>
</html>
sxysoft_csdn 2021-01-28
- 打赏
- 举报
可以直接用原生js实现
sxysoft_csdn 2021-01-28
- 打赏
- 举报
都不需要Jquery，下载库麻烦。
Oliver尹 2021-01-28
- 打赏
- 举报
$(".mode_li").click(() => {
console.log($(".type_li.active").html())
})
$(".type_li").click(() => {
console.log($(".mode_li.active").html())
})
