html中如果出现多个结构相同的组织，如何编写JS代码

悬赏园豆：50 [已解决问题] 解决于 2016-08-07 15:50

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Document</title>
  7     
  8     <style type="text/css">
  9     * {
 10         margin: 0;
 11         padding: 0;
 12     }
 13     
 14     li {
 15         list-style: none;
 16     }
 17     
 18     #jpg {
 19         position: relative;
 20         left: 50%;
 21         top: 20px;
 22         margin-left: -150px;
 23         width: 300px;
 24         height: 300px;
 25         margin-bottom: 20px;
 26     }
 27     
 28     #jpg li {
 29         display: block;
 30     }
 31     
 32     #pick {
 33         width: 300px;
 34         height: 300px;
 35     }
 36     
 37     #pick .pic {
 38         position: absolute;
 39         top: 0px;
 40         left: 0px;
 41         opacity: 1;
 42     }
 43     
 44     #pick .hid {
 45         position: absolute;
 46         top: 0px;
 47         left: 0px;
 48         opacity: 0;
 49     }
 50     
 51     img {
 52         width: 300px;
 53         height: 300px;
 54     }
 55     
 56     #panel ul {
 57         list-style: none;
 58         height: 20px;
 59         position: absolute;
 60         bottom: 20px;
 61         left: 50%;
 62         margin-left: -52px;
 63         border-color: orange;
 64         z-index: 1;
 65         background: rgba(0, 0, 0, 0.5);
 66         border-radius: 20px;
 67     }
 68     
 69     #panel ul li {
 70         float: left;
 71         margin: 0 3px;
 72         width: 20px;
 73         height: 20px;
 74         background: #FF5601;
 75         border-radius: 50%;
 76         text-align: center;
 77         color: #fff;
 78         font-size: 12px;
 79         line-height: 20px;
 80         background: rgba(255, 86, 1, 0.7);
 81         cursor: pointer;
 82         z-index: 1;
 83     }
 84     </style>
 85 </head>
 86 <script type="text/javascript">
 87 function animate(m) {
 88     var parent = document.getElementById('pick');
 89     var pic = parent.getElementsByTagName('li');
 90     if (m) {
 91         pic[m].setAttribute('class', 'pic');
 92     }
 93 }
 94 
 95 function div1() {
 96     var parent = document.getElementById('pick');
 97     var pic = parent.getElementsByTagName('li');
 98     var panel = document.getElementById('panel');
 99     var li = panel.getElementsByTagName('li');
100     
101     for (var i = 0; i < li.length; i++) {
102         li[i].id = i;
103         li[i].onclick = function(i) {
104             for (var j = 0; j < li.length; j++) {
105                 pic[j].setAttribute('class', 'hid');
106             }
107             var x = this.id;
108             animate(x);
109         }
110     }
111 }
112 window.onload = function() {
113     div1();
114 
115 }
116 </script>
117 
118 <body>
119     <div id="jpg">
120         <div id="pick">
121             <li class="pic"><img src="../pic/65u58PIC6Ee.jpg"></li>
122             <li class="hid"><img src="../pic/90D58PICwjV_1024.jpg"></li>
123             <li class="hid"><img src="../pic/0877762af.jpg"></li>
124             <li class="hid"><img src="../pic/575d2dc4.jpg"></li>
125         </div>
126         <div id="panel">
127             <ul>
128                 <li>1</li>
129                 <li>2</li>
130                 <li>3</li>
131                 <li>4</li>
132             </ul>
133         </div>
134     </div>
135     <div id='div'>
136         <div id="jpg">
137             <div id="pick">
138                 <li class="pic"><img src="../pic/65u58PIC6Ee.jpg"></li>
139                 <li class="hid"><img src="../pic/90D58PICwjV_1024.jpg"></li>
140                 <li class="hid"><img src="../pic/0877762af.jpg"></li>
141                 <li class="hid"><img src="../pic/575d2dc4.jpg"></li>
142             </div>
143             <div id="panel">
144                 <ul>
145                     <li>1</li>
146                     <li>2</li>
147                     <li>3</li>
148                     <li>4</li>
149                 </ul>
150             </div>
151         </div>
152     </div>
153 </body>
154 
155 </html>

如何组织JS代码实现2个div都有点击效果

aimonengzhu | 初学一级 | 园豆：193
提问于：2016-08-06 22:06

< >

最佳答案

这种多用class来选择，不要用Id。然后用循环来输出结果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    li {
        list-style: none;
    }
    
    .jpg {
        position: relative;
        left: 50%;
        top: 20px;
        margin-left: -150px;
        width: 300px;
        height: 300px;
        margin-bottom: 20px;
    }
    
    .jpg li {
        display: block;
    }
    
    .pick {
        width: 300px;
        height: 300px;
    }
    
    .pick .pic {
        position: absolute;
        top: 0px;
        left: 0px;
        opacity: 1;
    }
    
    .pick .hid {
        position: absolute;
        top: 0px;
        left: 0px;
        opacity: 0;
    }
    
    img {
        width: 300px;
        height: 300px;
    }
    
    .panel ul {
        list-style: none;
        height: 20px;
        position: absolute;
        bottom: 20px;
        left: 50%;
        margin-left: -52px;
        border-color: orange;
        z-index: 1;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 20px;
    }
    
    .panel ul li {
        float: left;
        margin: 0 3px;
        width: 20px;
        height: 20px;
        background: #FF5601;
        border-radius: 50%;
        text-align: center;
        color: #fff;
        font-size: 12px;
        line-height: 20px;
        background: rgba(255, 86, 1, 0.7);
        cursor: pointer;
        z-index: 1;
    }
    </style>
</head>
<script type="text/javascript">
function animate(m, el) {
    var pic = el.querySelectorAll('.pick li');
    if (m) {
        pic[m].setAttribute('class', 'pic');
    }
}

function div1() {
    var el_jpgs = document.querySelectorAll('.jpg');
    el_jpgs.forEach(el => {
        var parent = el.querySelector('.pick');
        var pic = el.querySelectorAll('li');
        var panel = el.querySelector('.panel');
        var li = panel.querySelectorAll('li');
        
        for (var i = 0; i < li.length; i++) {
            li[i].id = i;
            li[i].onclick = function(i) {
                for (var j = 0; j < li.length; j++) {
                    pic[j].setAttribute('class', 'hid');
                }
                var x = this.id;
                animate(x, el);
            }
        }
    });
}
window.onload = function() {
    div1();

}
</script>

<body>
    <div class="jpg">
        <div class="pick">
            <li class="pic"><img src="../pic/65u58PIC6Ee.jpg"></li>
            <li class="hid"><img src="../pic/90D58PICwjV_1024.jpg"></li>
            <li class="hid"><img src="../pic/0877762af.jpg"></li>
            <li class="hid"><img src="../pic/575d2dc4.jpg"></li>
        </div>
        <div class="panel">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </div>
    <div class="jpg">
        <div class="pick">
            <li class="pic"><img src="../pic/65u58PIC6Ee.jpg"></li>
            <li class="hid"><img src="../pic/90D58PICwjV_1024.jpg"></li>
            <li class="hid"><img src="../pic/0877762af.jpg"></li>
            <li class="hid"><img src="../pic/575d2dc4.jpg"></li>
        </div>
        <div class="panel">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </div>
</body>

</html>

仅供参考。

收获园豆：40

幻天芒 | 高人七级 |园豆：37207 | 2016-08-07 10:26

多谢~

看了你这个答案又去看了document.querySelectorAll 和foreach

foreach是不是再firefox不能实现啊！！

aimonengzhu | 园豆：193 (初学一级) | 2016-08-07 15:46

@aimonengzhu: 可以的哈。如果forEach不支持，那你就用循环就是了。

幻天芒 | 园豆：37207 (高人七级) | 2016-08-07 17:07

其他回答(1)

1. 修改相关命名，保证唯一性

2. 通过全路径操作html对象和样式实现。

收获园豆：10

waiter | 园豆：1000 (小虾三级) | 2016-08-06 22:42

修改id属性命名，那函数是不是还得写一遍。

重新编写js代码，想了想，还是不太会。

支持(0) 反对(0) aimonengzhu | 园豆：193 (初学一级) | 2016-08-06 23:00

@aimonengzhu: 如果js编写不太明白，试着可以用jQuery

支持(0) 反对(0) 代码飞了 | 园豆：470 (菜鸟二级) | 2016-08-07 09:40

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

html中如果出现多个结构相同的组织，如何编写JS代码

欢迎，请先登录或者注册。