javascript遍历class同级元素

//核心片段

$(".className").click(function(){

     var n = $(this).index('.className');

     var m = document.getElementsByClassName("className1");

     mdisplay = $(".className1").eq(n).css('display');

     if(mdisplay == "block") {

     m[n].style.display = "none";

     $(".className2").eq(n).attr("src","images/demo.png");

     }else {

     m[n].style.display = "block";

     $(".className2").eq(n).attr("src","images/demo.png");

 }

  });

    

为了减少样式表的冗余，通常我们会给元素赋class值以取得它所对应的公共样式。这样的弊端在于，在forEach遍历状态下，当我们想要实现一个元素的点击事件或者想要同级class对应地响应点击事件时，就会比较棘手。

因此，我们通过$(this).index('.className')来获取当前获得点击事件的元素索引，接下来的操作就会很顺理成章了。我们通过m[n]就可以操作任何一个DOM节点。

注：在表述上的区别，原生jquery下要用$(".className1").eq(n).css('display')来定位到索引，m[n].style.display不能实现。