Question

我有一个看起来像这样的数组 ["1352.jpg", "1353.jpg", "1354"]。我想遍历此数组并呈现以逗号分隔的项目的锚链接。我正在寻找类似<a href='1352.jpg'>1352.jpg</a>, <a href='1353.jpg'>1353.jpg</a>, etc的东西。我似乎无法使它正常工作。这是我在做什么，但我没有得到想要的东西。

var images = ["1352.jpg", "1353.jpg", "1354"];
renderImages(images){
        var result;
        if(images != null && images.length > 0){
            result = images.map(obj => {
                var res = '<a href='+obj+'>obj</a>';
            });
            result = res.join(', ');
        }else{
             result = 'null';
        }
        return result;
    }

请问我在这里做错什么了吗？

Answer 1

仅使用字符串插值，您的原始代码缺少map函数内部的返回值，并且obj直接写在了内部标记中

var images = ["1352.jpg", "1353.jpg", "1354"];
renderImages(images){
    if(!images || !images.length) {
      return null;
    }
    return images.map(obj => `<a href='${obj}'>${obj}</a>`);
}

我还想知道您是否打算返回文本版本的null还是仅返回null，所以在我的回答中，我返回了null。

看到Emile的评论后，您确实确实用reactjs标记了它，在这种情况下，您可能应该只渲染jsx节点，您可以这样做：

return (
  <div>
    { images && images.length && images.map( img => <a key={img} href={img}>{img}</a> ) 
  </div> );

Answer 2

const images = ['image1_url', 'image2_url', 'image3_url']
const app = document.getElementById('app');

function renderImages() {
    return images.map((link) => {
        const a = document.createElement('a');
        a.setAttribute('href', link);
        a.innerText = link;
        a.insertAdjacentText('beforeend', ', ');
        app.appendChild(a);
    });

}

renderImages()

Answer 3

首先想到的是这里缺少return语句：

images.map(obj => {
            var res = '<a href='+obj+'>obj</a>';
           return res;
        });

或仅删除{}和变量声明。

images.map(obj => '<a href='+obj+'>obj</a>');

然后更改 result = res.join(", "); 至 result = result.join(", ");

Answer 4

const imageHrefs = ["1352.jpg", "1353.jpg", "1354.png"];
const container = document.getElementById('container');

imageHrefs.forEach((href) => {
  const a = document.createElement('a');
  a.setAttribute('href', href);
  a.innerText = `Link to ${href}`;
  container.appendChild(a);
  container.appendChild(document.createElement('br'));
})

<div id="container"></div>

除了使用.map()之外，您还可以使用其他解决方案。

Answer 5

此方法有效，只是对地图和join语句做了一些调整。

var todos = $('input[type="radio"]');
  $(todos).on('click',() =>{
    var newText = '';
    Array.from(todos).forEach(
      function(element) {
        if(element.checked)
          newText+=element.value
      });
    $('#notem').val(newText);
  });
  $('#notem').val($('#notem').val() + $('input[name="cual"]').val());

遍历数组，为锚链接分配值

5 个答案: