給HTML頁面指定元素添加屬性，添加父元素

下面拿一個給富文本中所有的圖片增加layer彈窗效果。

思路： 

1. 給富文本父元素設置屬性。
2. 獲取父元素里所有的img   此處用到querySelectorAll 函數
3. for 遍歷標簽修改需求
   

 

復習jQuery屬性

wrap給指定元素增加父元素

 

JS屬性

.src獲取標簽路徑值

setAttribute給標簽賦值

 

<script type="text/javascript">
        //給指定標簽追加父元素
        $('.memorandummainlist img').wrap('<div  id="layer-photos-demo" class="layer-photos-demo" onclick="return onimg();"></div>');
        
        //獲取頁面里所有的指定標簽
        let target = document.querySelectorAll('.memorandummainlist img');
        //遍歷頁面里所有獲取到的指定標簽並執行需求的事件
        for (var i = 0; i < target.length; i++) {
            //獲取循環中標簽的SRC值
            var img_src = target[i].src;
            //給頁面里每個指定標簽屬性並賦值
            target[i].setAttribute('layer-src',img_src);
        }
        </script>
        <script type="text/javascript">
            //調用示例
        function onimg(){
            layer.photos({
              photos: '#layer-photos-demo',
              id:'timg',
              anim:0
            }); 
        }
    </script>

覺得有用了扣下1，謝謝