如何獲取陣列中影像的src和ID

我制作了一張卡片作為“動態組件”......我的網站可以搜索 Spotify 上的任何藝術家或歌曲。您搜索的每位藝術家都會出現在他自己的卡片中。

我用JS寫了卡片、圖片和標題組件。這是我的做法：

for(let index = 0; index < artistIdResult.items.length; index  )
{
    var artistImage = document.createElement("input");
    artistImage.className = "artistImage";
    artistImage.type = "image";
    artistImage.src = artistIdResult.items[index].images[0].url;
    artistImage.id = artistIdResult.items[index].id;
    artistImage.width = 100;
    artistImage.height = 100;

    var artistText = document.createElement("h6");
    artistText.className = "artistText";
    var text = document.createTextNode(artistIdResult.items[index].name);
}

（用于僅渲染藝術家/歌曲的數量）。

當我在檢查器上看到 HTML 時，會出現影像中的 src、ID 和更多資訊：

<input class="albumImage" type="image" src="https://i.scdn.co/image/ab67616d0000b273b13137d4579acad480ec9651" id="7m1DQbleCSsoBv1awh5qmu" width="80" height="80">

如何在陣列中獲取我按下的每張卡的 src 和 ID？我的意思是...我要求 JS 中的資料，HTML 顯示 src 和 ID，但是我怎樣才能在變數中獲取它，然后在陣列中獲取它？

uj5u.com熱心網友回復：

首先我們打開一個新陣列。然后，您可以使用 jQuery click 函式在單擊它時檢索屬性的值$(this)。并將它們推送到陣列中。您可以通過單擊測驗按鈕來檢查陣列。??

jsonArray = [];

$('.albumImage').click(function() {
    getSrc = $(this).attr('src');
    getId = $(this).attr('id');
    jsonArray.push(getSrc);
    jsonArray.push(getId);
});
$('.test').click(function() {
    alert(jsonArray);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="albumImage" type="image" src="https://i.scdn.co/image/ab67616d0000b273b13137d4579acad480ec9651" id="7m1DQbleCSsoBv1awh5qmu" width="80" height="80">

<input class="albumImage" type="image" src="https://i.scdn.co/image/ab67616d0000b273b13137d4579acad480ec9651" id="1" width="80" height="80">

<button class="test">click to see array</button>

uj5u.com熱心網友回復：

如果我正確理解您的要求，您希望訪問陣列中的元素屬性值。如果是，你可以試試這個：

console.log(Array.from(document.getElementsByClassName('albumImage')).map(item => {
    return {
    'src': item.getAttribute('src'),
    'id': item.getAttribute('id')
  }
}));

<input class="albumImage" type="image" src="https://i.scdn.co/image1" id="1" width="80" height="80">
<input class="albumImage" type="image" src="https://i.scdn.co/image2" id="2" width="40" height="40">
<input class="albumImage" type="image" src="https://i.scdn.co/image3" id="3" width="20" height="20">

更新：根據作者評論更新答案，已添加單擊事件以獲取單擊的影像id和src屬性值。

演示：

const artistIdResult = {
  items: [{
    images: [{
      url: 'https://i.scdn.co/image/ab67616d0000b273b13137d4579acad480ec9651'
    }],
    id: '1',
    name: 'alpha'
  }, {
    images: [{
      url: 'https://i.scdn.co/image/ab67616d0000b273b13137d4579acad480ec9651'
    }],
    id: '2',
    name: 'beta'
  }]
};

for(let index = 0; index < artistIdResult.items.length; index  )
{
  var artistImage = document.createElement("input");
  artistImage.className = "artistImage";
  artistImage.type = "image";
  artistImage.src = artistIdResult.items[index].images[0].url;
  artistImage.id = artistIdResult.items[index].id;
  artistImage.width = 100;
  artistImage.height = 100;

  var artistText = document.createElement("h3");
  artistText.className = "artistText";
  var text = document.createTextNode(artistIdResult.items[index].name);
  artistText.append(text);

  document.getElementById('app').append(artistImage)
  document.getElementById('app').append(artistText)

  var div = document.getElementById(artistIdResult.items[index].id);
  div.addEventListener('click', e => {
    console.log('id', e.target.id); // Id of clicked image
    console.log('src', e.target.src); // Src of clicked image
  });
}

<div id="app">
</div>

uj5u.com熱心網友回復：

看看jQuery 的點擊功能。

$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});

這將在您定位的元素上附加一個點擊處理程式。在回呼函式中，您可以使用$(this).

從那里您可以將資料推送到全域陣列或類似陣列中。

標籤：javascript html jQuery 数组

上一篇：Whatisthebestwaytodownloadmulitpleimagesusingjquery

下一篇：針對CSS樣式的特定Jquery資料表標題