javascript - 如何使用js或jq批量把图片的属性赋值给src？

Question

举个栗子：

<img data-face="01.jpg" src="plancehold.jpg"/>
...
<img data-face="02.jpg" src="plancehold.jpg"/>
...
...
<img data-face="03.jpg" src="plancehold.jpg"/>
...
<img data-face="04.jpg" src="plancehold.jpg"/>
<img data-face="05.jpg" src="plancehold.jpg"/>
...
<img data-face="06.jpg" src="plancehold.jpg"/>

...为中间间杂着若干标签或内容，现在要用js把自己的data-face的值附给自己的src属性，大道如下效果：

<img data-face="01.jpg" src="01.jpg"/>
...
<img data-face="02.jpg" src="02.jpg"/>
...
...
<img data-face="03.jpg" src="03.jpg"/>
...
<img data-face="04.jpg" src="plancehold.jpg"/>
<img data-face="05.jpg" src="plancehold.jpg"/>
...
<img data-face="06.jpg" src="plancehold.jpg"/>

还有这种效果：

<img data-face="01.jpg" src="01.jpg"/>
...
<img data-face="02.jpg" src="02.jpg"/>
...
...
<img data-face="03.jpg" src="03.jpg"/>
...
<img data-face="04.jpg" src="04.jpg"/>
<img data-face="05.jpg" src="05.jpg"/>
...
<img data-face="06.jpg" src="06.jpg"/>

两种方法分别怎么写？

Answer 1

jquery版本：

var imgs=$("img[data-face]");
    imgs.each(function(num,e){
        var _this=$(this);
        _this.attr("src",_this.data("face"));
    });

Answer 2

遍历要附值的所有图片，
获取属性var dataFace = $(this).attr("data-face");
赋值属性$(this).attr("src",dataFace);

Answer 3

  var img = document.getElementsByTagName('img');
  var i = 0;
  for(;i<img.length;i++){
    var face = img[i].getAttribute('data-face');
    img[i].setAttribute('src',face);
  }

水平不高，凑合看吧

Answer 4

使用遍历 封装个函数