自动生成 tag from tag

问题描述 投票:0回答:7

我有一个页面,其中经常发生以下模式:

<a href="path/to/image.jpg">
    <img src="path/to/image.jpg">
</a>

为了避免打字错误,我宁愿只需输入一次图像和路径。

有没有办法(最好只使用原生HTML / JS / CSS)来避免重复?

只需要支持最近的浏览器。

编辑添加:页面中有一个位置具有相似但可能相互冲突的模式:

<a href="https://a.web.site/">
    <img src="image.jpg">
</a>

如果需要,我可以摆脱它。但也许一个更强大的解决方案是从以下内容开始:

<a href="path/to/image.jpg">
    IMG_LINK_TO_CREATE
</a>

并用img标签替换预定义的模式,而不是相反。

javascript html
7个回答
1
投票

为了使我的答案适合您的问题,我将只使用Vanilla JavaScript。此外,因为我不清楚你是否试图从一个锚或反之创造一个img,我正在为你做这两件事。我会先把你问题标题中出现的那个放在首位。

确定您的元素:

如果您希望这样做,您需要为锚标记至少提供一个类或唯一的id属性,以便以后在将它们加载到DOM时对其进行适当的修改。

Generate anchor tag for an image tag

对于这种情况,由于您可能会使用多个锚点,并且您必须对所需的每个锚点执行相同的操作,因此使用“create-link”的类属性就足以让您直接从DOM中轻松修改这些元素。这样的事情会有所帮助:

<img class="create-link" src="path/to/image.jpg">

有了这个,你可以创建一个名为generateImages()的函数来完成所有的工作。

function generateImages(){
   let images = document.querySelectorAll(".create-link");
   images.forEach(image=>{
      let link = document.createElement('a'),
            parent = image.parentNode,
          childImage = new Image();
      link.href = image.src;
      link.classList.add('generated-link');
      childImage.src = image.src;
      link.append(childImage);
      image.parentNode.removeChild(image);
      parent.append(link);
   });
}

这应该做到这一点。您现在可以随时执行它或在窗口加载事件中执行它。

window.onload = generateImages;

这是一个帮助您可视化此方法的整体的小提琴。

https://jsfiddle.net/m90b6vc5/1/

Generate image from anchor tag:

与另一个相同,确定将来需要在JavaScript中使用的元素。代码对此更容易一些,只需要从锚标记中检索链接并将其附加到新的图像元素:

function generateImages(){
   let a = document.querySelectorAll(".create-link");
   a.forEach(element=>{
      let image = new Image();
      image.src = element.href;
      element.append(image);
   });
}

https://jsfiddle.net/m90b6vc5


1
投票

你可以这样做。但请注意,这只会在页面加载后添加img。这意味着可以在页面加载后重新呈现用户视图。您可以通过使用css在.img-link类中定义预期的img with-height或ratio来在一定程度上控制它

$(document).ready(function(){
  $('.img-link').each(function(){
    $(this).append($('<img src="' + $(this).attr('href') + '" />'));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<a href="path/to/image.jpg" class="img-link"></a>
<a href="custom-link">
  <img src="custom-image.jpg" />
</a>
<a href="path/to/image.jpg" class="img-link"></a>

1
投票

javascript函数

function createImageStructure(number, imageArray){ var structure = "";
    for(var i = 0; i < number; i++){
       structure += '<a href="'+imageArray[i]+'"> <img src="'+imageArray[i]+'"> </a>';
    } console.log(structure); }


var imageArray = [];
imageArray.push("https://pay.google.com/about/static/images/social/knowledge_graph_logo.png");

imageArray.push("https://pay.google.com/about/static/images/social/knowledge_graph_logo.png");

createImageStructure(2, imageArray);

产量


<a href="https://pay.google.com/about/static/images/social/knowledge_graph_logo.png"> <img src="https://pay.google.com/about/static/images/social/knowledge_graph_logo.png"> </a><a href="https://s23527.pcdn.co/wp-content/uploads/2018/05/google-photos.png"> <img src="https://s23527.pcdn.co/wp-content/uploads/2018/05/google-photos.png"> </a>

基本上,创建一个函数,创建一个数组,拥有图像路径,这将有助于创建具有多个图像的HTML结构。

如果您需要更多帮助请告诉我,如果您只想为所有img标签设置一个图像源路径,我将解决此问题


1
投票

虽然我真的不想鼓励您使用客户端代码执行此操作,但我至少建议您使用生成链接的代码而不是生成图像的代码。这样,如果JS没有运行,网站仍会显示图像。

最简单的方法是向要在链接中自动换行的所有图像添加一个类,例如“自动链接”,然后运行以下代码:

for (const img of document.querySelectorAll(".auto-link")) {
    const link = document.createElement("a");
    link.href = img.src;
    img.parentElement.replaceChild(link, img);
    link.appendChild(img);
}

您可以将其放在“domready”或“load”事件侦听器中,或者只放在页面末尾的脚本标记中。

请注意,几乎所有浏览器在其上下文菜单中都有“视图图像”选项,因此没有理由这样做。您不应该引入对JavaScript的依赖,如果您禁用JS或使用屏幕阅读器,这会降低执行速度并且无法工作。相反,这些功能应该在服务器端完成或作为编译步骤完成。


1
投票

封装你的html并在其他地方重用它的好方法是React。

function AImg({ href, src }) {
  return <a href={ href || src }>
    <img src={ src }/>
  </a>;
}

ReactDOM.render(
  <div>
    <AImg src="https://placecage.com/./200/200" />
    <AImg src="https://placecage.com/c/200/200" href="https://placecage.com"/>
    <AImg src="https://placecage.com/g/200/200" />
  </div>, 
  document.getElementById('aimg_container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="aimg_container"></div>

1
投票

React.js是一个很好的方法。如果你只想使用ES6,你也可以使用反引号。添加链接到数组中的图像和链接,并在for of循环中创建与图像的链接。就像是:

const urls = ['1', '2', '3'];
const images = ['a','b','c'];
let links = [];

for (let index of urls.keys()) {
  links.push(`
    <a href="${urls[index]}"><img src="${images[index]}" /></a>
  `);
}

0
投票

向DOM添加元素可能很昂贵。我不会通过javascript添加a标签。保持您的HTML大部分不变,但将href属性留空以填充您想要填充的链接。

我还给了你选择基于href填充图像源。这不如在呈现页面后必须加载图像那么好。

//Wait for everything to be loaded
document.addEventListener("DOMContentLoaded", function(){
  //Find a tags with empty hrefs
  let emptyAs = document.querySelectorAll("a[href='']");
  emptyAs.forEach((a) => {
    //Update href based on image src
    a.href = a.querySelector("img").src;
  });
  
  //Alternatively Find images with empty src
  let emptyImgs = document.querySelectorAll("img[src='']");
  emptyImgs.forEach((img) => {
    img.src = img.parentNode.href;
  });
  
  
});
<a href="">
  <img src="https://fillmurray.com/200/200" />
</a>
<a href="">
  <img src="https://fillmurray.com/100/100" />
</a>

<a href="https://fillmurray.com/300/300">
  <img src="" />
</a>


<a href="http://www.google.com">
  <img src="https://fillmurray.com/400/400" />
</a>

注意forEach没有IE支持节点列表:https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

© www.soinside.com 2019 - 2024. All rights reserved.