js html 如何让每个li中的点击事件独立
代码如下这点击一个其他的就都隐藏了小弟想实现每个li中点击切换图片的功能还望高手赐教<!doctypehtml><html><Head></Head><body><scr...
代码如下 这点击一个 其他的就都隐藏了 小弟想实现每个li中 点击切换图片的功能 还望高手赐教
<!doctype html>
<html><Head>
</Head>
<body>
<script type="text/javascript">
function sel(obj)
{
var lis=document.getElementsByTagName("span");
var img=document.getElementsByTagName("img")
for(var i=0;i<lis.length;i++)
{
if(lis[i]!=obj)
{
img[i].style.display="none";
}
else
img[i].style.display="block";
}
}
</script>
<ul>
<li>
<div class='img'>
<a>
<img style='display:block' src='1.jpg' />
<img style='display:none' src='2.jpg' />
</a>
</div>
<div>
<span onclick="sel(this);">1</span>
<span onclick="sel(this);">2</span>
</div>
</li>
<li>
<div class='img'>
<a>
<img style='display:block' src='1.jpg' />
<img style='display:none' src='2.jpg' />
<img style='display:none' src='3.jpg' />
</a>
</div>
<div>
<span onclick="sel(this);">1</span>
<span onclick="sel(this);">2</span>
<span onclick="sel(this);">3</span>
</div>
</li>
<li>
<div class='img'>
<a>
<img style='display:block' src='1.jpg' />
<img style='display:none' src='2.jpg' />
</a>
</div>
<div>
<span onclick="sel(this);">1</span>
<span onclick="sel(this);">2</span>
</div>
</li>
</ul>
</body>
</html> 展开
<!doctype html>
<html><Head>
</Head>
<body>
<script type="text/javascript">
function sel(obj)
{
var lis=document.getElementsByTagName("span");
var img=document.getElementsByTagName("img")
for(var i=0;i<lis.length;i++)
{
if(lis[i]!=obj)
{
img[i].style.display="none";
}
else
img[i].style.display="block";
}
}
</script>
<ul>
<li>
<div class='img'>
<a>
<img style='display:block' src='1.jpg' />
<img style='display:none' src='2.jpg' />
</a>
</div>
<div>
<span onclick="sel(this);">1</span>
<span onclick="sel(this);">2</span>
</div>
</li>
<li>
<div class='img'>
<a>
<img style='display:block' src='1.jpg' />
<img style='display:none' src='2.jpg' />
<img style='display:none' src='3.jpg' />
</a>
</div>
<div>
<span onclick="sel(this);">1</span>
<span onclick="sel(this);">2</span>
<span onclick="sel(this);">3</span>
</div>
</li>
<li>
<div class='img'>
<a>
<img style='display:block' src='1.jpg' />
<img style='display:none' src='2.jpg' />
</a>
</div>
<div>
<span onclick="sel(this);">1</span>
<span onclick="sel(this);">2</span>
</div>
</li>
</ul>
</body>
</html> 展开
2个回答
展开全部
<script type="text/javascript">
/**
* 由于原生 js 操作 ByTagName 比较不方便，所以建议通过 id 选择器来完成操作
* 首先可以为每一个 a 标签添加 id，id = "mylink_*"
* 然后在 sel 方法中，使用两个参数，一个是对应的 a 的 mylink_* 中的 *，另外一个就是其中的第几副 img
* 根据 a 标签的 id ，对应操作 a 下对应下标的 img
* 当然，你也可以通过父子节点 parentNode childNode 来完成，但是也比较麻烦
*/
function sel(linkid, imgindex) {
// 先找到 a 标签
var link = document.getElementById("mylink_" + linkid);
// 然后找 a 下的 img list
var imgs = link.getElementsByTagName("img");
var len = imgs.length;
if (len > 0) {
for (var i = 0; i < len; i++) {
var img = imgs[i];
// 根据下标显示隐藏
if (i.toString() == imgindex.toString()) {
img.style.display = "block";
} else {
img.style.display = "none";
}
}
}
}
</script>
其中，你的 html 中 ul 中的 li 可以修改如下
<li>
<div class="img">
<a id="mylink_1">
<img style="display:block" src="1.jpg" alt="" />
<img style="display:none" src="2.jpg" alt="" />
</a>
</div>
<div>
<span onclick="sel(1,0);">1</span>
<span onclick="sel(1,1);">2</span>
</div>
</li>
<li>
<div class="img">
<a id="mylink_2">
<img style="display:block" src="1.jpg" alt="" />
<img style="display:none" src="2.jpg" alt="" />
</a>
</div>
<div>
<span onclick="sel(2,0);">1</span>
<span onclick="sel(2,1);">2</span>
</div>
</li>
已赞过
已踩过<
你对这个回答的评价是？
展开全部
function sel(obj){
//知道了点击的相应对象，那么通过DOM关系处理就行了
var par=obj.patentNode;//span的父辈元素
var lis=par.getElementsByTagName("span");//获取当前父辈元素下所有span
var img=par.parentNode.getElementsByTagName("img");//获取图像
for(var i=0;i<lis.length;i++)
{
//和if语句效果一样，改不改无所谓，少写点东西罢了
var display=lis[i]!=obj?"none":"block";
img[i].style.display=display;
}
}
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
