如何獲取圖像src值

Question

我想在單擊表列中的圖像時獲取圖像的 src

結構就像表是

   <html>
   <body>
      <div>
         <table>
            <tr>
               <td img src=" xxx "></td>
            </tr>
            <tr>
               <td img src=" xxx "></td>
            </tr>
            <tr>
               <td img src=" xxx "></td>
            </tr>
         </table>
      </div>
   </body>
</html>

請告訴我一種在單擊圖像時獲取該圖像的 src 的方法，並且我想將該 src 發送到另一個 html 頁面

Answer 1

首先你的html是不正確的。請像這樣更正你的html

<table>
    <tr>
      <td> <img src=" xxx " /></td>
    </tr>
    <tr>
      <td> <img src=" xxx " /></td>
    </tr>
    <tr>
      <td> <img src=" xxx " /></td>
    </tr>
</table>

並獲得點擊image src使用這個

$(function () {
  $("img").click(function () {
    var src = $(this).attr("src");
    window.location = "yourpage.html?src=" + src;
   });
});

您還需要包含jquery library參考。

Answer 2

嘗試

const img = document.querySelector('img');

.addEventListener('click', (event) => {
  alert(event.target.getAttribute('src'));
});

Answer 3

您的代碼中幾乎沒有錯誤。 img是一個單獨的 html 標簽。 您不能將其設置為td的屬性。

所以你的html會是這樣的

HTML

<div>
  <table>
    <tr>
      <td><img src=" xxx ">1</td>
    </tr>
    <tr>
      <td><img src=" xxx2 ">2</td>
    </tr>
    <tr>
      <td><img src=" xxx3 ">3</td>
    </tr>
  </table>
</div>

要獲取src值，您可以使用getElementsByTagName它將為您提供所有圖像的集合。

然后循環遍歷它並在closure添加addEventListener 。 您還可以使用getAttribute獲取標簽的任何屬性

JS

// get all the images
var getAllImages = document.getElementsByTagName('img');
// loop through it
for (var i = 0; i < getAllImages.length; i++) {
  (function(x) {  // closure starts here
    getAllImages[x].addEventListener('click', function() {

      alert(this.getAttribute('src'))
})
  }(i))  // pass the value of i
}

演示

Answer 4

表格單元格（即<td> ）沒有有效的img和src屬性，盡管它可能有一個包含background-image的style屬性。

 document.addEventListener('DOMContentLoaded', _ => { document.addEventListener('click', event => { if (event.target.tagName.toUpperCase() == 'TD') { document.getElementById('imgSrc').value = event.target.style.backgroundImage.replace(/(url\\(")|("\\))/g, ''); } }); });

 td { min-width: 32px; line-height: 32px; }

 <div>Click on an image to have its src attribute set as the value of the text input below: <table> <tr> <td style="background-image: url('https://www.gravatar.com/avatar/fff263875808fbce8d846947c6d56449?s=32&d=identicon')"> 1 </td> </tr> <tr> <td style="background-image: url('https://www.gravatar.com/avatar/616931b5c5ba8790a191fa6aea465c65?s=32&d=identicon')"> 2 </td> </tr> <tr> <td style="background-image: url('https://www.gravatar.com/avatar/56e1fa920ed4243286b8e62ab4fbdfef?s=32&d=identicon')"> 3 </td> </tr> </table> Image src: <div><input type="text" id="imgSrc" size="80" readonly /></div> </div>

更常見的方法是使用帶有src屬性的<img>標簽。

回答你的“問題”：

告訴我一種在單擊圖像時獲取該圖像的 src 的方法，並且我想將該 src 發送到另一個 html 頁面

使用 JavaScript - 我推薦了一種稱為事件委托的技術。 使用document.addEventListener()將單擊事件的事件處理程序綁定到事件DOMContentLoaded （以了解頁面何時加載），然后使用單個回調觀察文檔上的單擊，如下例所示。這樣，整個頁面只有一個事件偵聽器，而不是每個圖像一個，這可能導致內存泄漏等。輸入的值可以與表單一起提交或發送到另一個頁面（例如，使用 AJAX 請求））。

 document.addEventListener('DOMContentLoaded', _ => { document.addEventListener('click', event => { if (event.target.tagName.toUpperCase() == 'IMG') { document.getElementById('imgSrc').value = event.target.src; } }); });

 <div>Click on an image to have its src attribute set as the value of the text input below: <table> <tr> <td> 1 <img src=" https://www.gravatar.com/avatar/fff263875808fbce8d846947c6d56449?s=32&d=identicon " /> </td> </tr> <tr> <td> 2 <img src="https://www.gravatar.com/avatar/616931b5c5ba8790a191fa6aea465c65?s=32&d=identicon" /> </td> </tr> <tr> <td> 3 <img src="https://www.gravatar.com/avatar/56e1fa920ed4243286b8e62ab4fbdfef?s=32&d=identicon" /> </td> </tr> </table> Image src: <input type="text" id="imgSrc" size="75" /> </div>

如果您使用像jQuery這樣的 JavaScript 庫，則可以簡化代碼，如下例所示，使用.ready() 、 .val()等。這篇關於使用 jQuery 進行事件委托的文章（使用.on()方法）也可能有幫助。

 $(_ => { $(document).click(event => { if (event.target.tagName.toUpperCase() === 'IMG') { $('#imgSrc').val(event.target.src); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <table> <tr> <td> 1 <img src=" https://www.gravatar.com/avatar/fff263875808fbce8d846947c6d56449?s=32&d=identicon" /> </td> </tr> <tr> <td> 2 <img src="https://www.gravatar.com/avatar/616931b5c5ba8790a191fa6aea465c65?s=32&d=identicon" /> </td> </tr> <tr> <td> 3 <img src="https://www.gravatar.com/avatar/56e1fa920ed4243286b8e62ab4fbdfef?s=32&d=identicon" /> </td> </tr> </table> <!-- removed 1 from table1 --> Image src: <input type="text" id="imgSrc" size="75" /> </div>

如何獲取圖像src值

問題描述

4 個解決方案

解決方案1
0 2016-12-09 04:05:19

解決方案2
0 2016-12-09 04:06:48

解決方案3
0 已采納 2016-12-09 04:12:57

解決方案4
0 2016-12-09 06:25:24

如何獲取圖像src值

問題描述

4 個解決方案

解決方案1 0 2016-12-09 04:05:19

解決方案2 0 2016-12-09 04:06:48

解決方案3 0 已采納 2016-12-09 04:12:57

解決方案4 0 2016-12-09 06:25:24

解決方案1
0 2016-12-09 04:05:19

解決方案2
0 2016-12-09 04:06:48

解決方案3
0 已采納 2016-12-09 04:12:57

解決方案4
0 2016-12-09 06:25:24