Question

js大神快来，这两个js发生冲突，望解答

<div id="wz"> 原液</div>
<div id="anniu"><script language="JavaScript" type="text/javascript">
function fn(n){
var nextn;
if(n==2){nextn=1;}
else{nextn=n+1;}
document.getElementById("img"+n).style.display="none";
document.getElementById("img"+nextn).style.display="block";
}
</script>
<img id="img1" src="images/an2.jpg" onclick="fn(1)" style="display:block;"/> <img id="img2" src="images/an1.jpg" onclick="fn(2)" style="display:none;"/> </div>
</div>
<div id="jj2">
<div id="wz">面膜</div>
<div id="anniu"><script language="JavaScript" type="text/javascript">
function fn(n){
var nextn;
if(n==2){nextn=1;}
else{nextn=n+1;}
document.getElementById("img"+n).style.display="none";
document.getElementById("img"+nextn).style.display="block";
}
</script>
<img id="img1" src="images/an4.jpg" onclick="fn(1)" style="display:block;"/> <img id="img2" src="images/an3.jpg" onclick="fn(2)" style="display:none;"/> </div>
</div>

Answer 1

错误1：ID具有为唯一性，不能有两个或两个以上的ID是同名的，否则会冲突；

错误2：函数名也是具有唯一性，不能存在同名函数。

你的目的不就是点一个图片自己隐藏，另一个图片显示么？这简单啊：

<script>
function fn(o){
   var imgs=o.parentNode.getElementsByTagName("img");
   for(var i=0;i<imgs.length;i++){
      imgs[i].style.display=(imgs[i]===o)?"none":"block";
   }
}
</script>
<div id="jj1">
   <div class="wz">原液</div>
   <div class="anniu">
      <img src="images/an1.jpg" onclick="fn(this);" style="display:block;"/>
      <img src="images/an2.jpg" onclick="fn(this);" style="display:none;"/>
   </div>
</div>
<div id="jj2">
   <div class="wz">面膜</div>
   <div class="anniu">
      <img src="images/an4.jpg" onclick="fn(this);" style="display:block;"/>
      <img src="images/an3.jpg" onclick="fn(this);" style="display:none;"/>
   </div>
</div>