图片点击事件，点击小图片，大图片没有变化为相对应的小图片，这是为什么呢？

2222222222222222222222222222222222222

慕粉2053247714 2017-06-23

源自：H5+CSS3+JS实现炫酷网页 5-6 作业题

收起

3回答

I_尼克哇回答被采纳获得+3积分 2017-06-23 14:35:27

vavar pics=document.getElementById("li-top-list-menu").getElementByTagName("img");   var pcs=document.getElementById("'li-top-list").getElementByTagName("img")[0];
   
  var pics=document.getElementById("li-top-list-menu").getElementByTagName("img");   
  var pcs=document.getElementById("'li-top-list").getElementByTagName("img")[0];
   for(var i=0;i<pics.lenght;i++){
    pics[i].onclick=function(){
   pcs.setAttribute("src",this.getAttribute("src"));
   }
   }

上面这段代码有三处错误：

第一个 li-top-list-menu 后面的 getElementByTagName("img"); 应该是 getElementsByTagName("img"); 注意少了个s 。
getElementById("'li-top-list") 这里在 li-top-list 前多了个单引号 ' 。
for(var i=0;i<pics.lenght;i++){ 里面的 pics.lenght 应该是 pics.length 。

同学你以后要多注意细节。

收起回答

慕粉2053247714 提问者 #1

大神，知道了。不过还是有个小疑问，我鼠标滑到第二个class为li-t的这个li上，就实现不了里面的点击切换图片效果了。就一个li能实现图片切换效果，鼠标滑到第二个li，内容显示出来之后，图片就切换没有效果了。是我获取byid错了吗？ <li class="li-o"><span></span><p>揭开留底防伪标签</p><div class="clear"></div><b></b></li> <li class="li-t"><span></span><p>高温消失防伪标签</p><div class="clear"></div><b></b></li>

2017-06-23 14:55:35
慕粉2053247714 提问者 #2

大神，知道了。不过还是有个小疑问，我鼠标滑到第二个class为li-t的这个li上，就实现不了里面的点击切换图片效果了。就一个li能实现图片切换效果，鼠标滑到第二个li，内容显示出来之后，图片就切换没有效果了。这个是我获取的时候byid获取错了吗？只能是实现第一个li里面的图片切换效果，显示第二个li中的内容，里面的图片切换就实现不了。

2017-06-23 16:26:46
I_尼克哇回复提问者慕粉2053247714 #3

因为使用id只认一个，如果麻烦点的话，可以每个li-t下写不同的id，针对每一个id下的图片写click事件。还有一种简单的办法。不用id，用class。如下，看不明白的话好好学习下jquery吧。 $('.li-top-list-menu').each(function(){ var obj_list_menu = $(this); $(this).find('img').each(function(){ $(this).click(function(){ obj_list_menu.prev('.li-top-list').find('img').attr('src', $(this).attr('src')); }) }); 替换掉，/** var pics=document.getElementById("li-top-list-menu").getElementsByTagName("img"); var pcs=document.getElementById("li-top-list").getElementsByTagName("img")[0]; for(var i=0;i<pics.length;i++){ pics[i].onclick=function(){ pcs.setAttribute("src",this.getAttribute("src")); } } **/

2017-06-23 17:24:30