如何使用jQuery或Vanilla JavaScript在img源代码中插入文本和文件类型?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (108)

当用户单击按钮时,我有一些图像元素想要添加额外的文本。

<img class="torso" src="img/girl/body/girl001.png" alt="">
<img class="eyebrows" src="img/eyebrows/black.png" alt="">
<img class="face face1" src="img/face/head1_1.png" alt="">

<button>Tilt Images</button>

需要在“.png”之前添加文本,最后的结果如下:

<img class="torso" src="img/girl/body/girl001-tilt.png" alt="">
<img class="eyebrows" src="img/eyebrows/black-tilt.png" alt="">
<img class="face face1" src="img/face/head1_1-tilt.png" alt="">

<button>Untilt Images</button>

在.png文件类型有效地使用“-tilt”版本交换图像之前,将“-tilt”添加到图像源名称。 所有图像名称的长度都不同,但我想,如果我以某种方式使用.find(); 在attr(); 对于“.png”和使用prepend(); 添加“-tilt”字符串它会起作用......我一直在绞尽脑汁想要如何实现这一目标。

提问于
用户回答回答于

这是一个很简单的String.replace()行动:

JavaScript:

document.querySelector("button").addEventListener("click", tilt);

// Get all the images into an Array
let imgs = Array.prototype.slice.call(document.querySelectorAll("img"));

function tilt(){
  // Loop over the array items
  imgs.forEach(function(img){
    // Replace the old src with an updated value
    img.src = img.src.indexOf("-tilt.png") > -1 ? img.src.replace("-tilt", "") : img.src.replace(".png", "-tilt.png") ;
  });
  console.log(imgs);
}
<img class="torso" src="img/girl/body/girl001.png" alt="">
<img class="eyebrows" src="img/eyebrows/black.png" alt="">
<img class="face face1" src="img/face/head1_1.png" alt="">
<button>Tilt/Untilt Images</button>

jQuery:

$("button").on("click", function(){
  // Loop over the JQuery wrapped set
  $("img").each(function(idx,img){
    // Replace the old src with the new one
    img.src = img.src.indexOf("-tilt.png") > -1 ? img.src.replace("-tilt", "") : img.src.replace(".png", "-tilt.png") ;
  });

  console.log($("img"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="torso" src="img/girl/body/girl001.png" alt="">
<img class="eyebrows" src="img/eyebrows/black.png" alt="">
<img class="face face1" src="img/face/head1_1.png" alt="">
<button>Tilt/Untilt</button>

用户回答回答于

这可以很容易地以一种或多或少模块化的方式来完成data-属性和本地JS。绑定按钮上的逻辑单击事件,在图像源上做一些字符串替换,更改按钮文本,就是这样。

const getTilted = (src) => src.replace(/(.*)\.(.*)/, "$1-tilted.$2");
const getUntilted = (src) => src.replace(/(.*)-tilted\.(.*)/, "$1.$2");

document.querySelector('#tilt').addEventListener('click', function() {
  let images = Array.from(document.querySelectorAll(this.dataset.tiltSelector));
  if(this.dataset.status === 'not-tilted') {
    for(let image of images) {
      image.src = getTilted(image.src);
      image.alt = getTilted(image.alt);
    }
    this.innerHTML = this.dataset.tiltedText;
    this.dataset.status = 'tilted';
  } else {
    for(let image of images) {
      image.src = getUntilted(image.src);
      image.alt = getUntilted(image.alt);
    }
    this.innerHTML = this.dataset.notTiltedText;
    this.dataset.status = 'not-tilted';
  }
});
<img class="tiltable torso" src="img/girl/body/girl.001.ab.png" alt="img/girl/body/girl.001.ab.png"><br>
<img class="tiltable eyebrows" src="img/eyebrows/pre.black.jpeg" alt="img/eyebrows/pre.black.jpeg"><br>
<img class="tiltable face face1" src="img/tilted-faces/head1_1.a_c.svg" alt="img/tilted-faces/head1_1.a_c.svg"><br>

<button id="tilt" data-not-tilted-text="Tilt images" data-tilted-text="Untilt images" data-status="not-tilted" data-tilt-selector=".tiltable">Tilt images</button>

扫码关注云+社区

领取腾讯云代金券