如何获得图像src值

时间:2016-12-09 04:01:00

标签: javascript html

我想在单击图像时获取图像的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页面

4 个答案:

答案 0 :(得分:0)

首先你的html是不正确的。请更正你的html

int checkcounter1(int addr, unsigned char ciphertext[], unsigned long int key_schedule[], int address_size, int counter_size)  
    { 
    int pos; 
    int exp; 
    char ch[16]; 
    unsigned long int chunk;
    int counter; 
    aes_decrypt(ciphertext, ch, key_schedule, 128); 
    chunk=strtoul(ch,NULL,16);
    printf("\nInside checkcounter 1 and chunk is %lu\n",chunk); 
    counter=chunk/(address_size*counter_size);
    printf("\n counter is %d and addr is %d\n",counter,addr);
    if (addr==1)     
        return onchip;     
    else 
        {
        if (addr%2==0) 
        {
        counter=counter/counter_size;
        printf("\n in if1\n");

        } 
            else 
        {
        counter=counter%counter_size;
        printf("\nin if2,counter is %d\n",counter);

        }     

    return 0; 

}

要点击<table> <tr> <td> <img src=" xxx " /></td> </tr> <tr> <td> <img src=" xxx " /></td> </tr> <tr> <td> <img src=" xxx " /></td> </tr> </table> 点击src,请使用此

image

此外,您还需要添加$(function () { $("img").click(function () { var src = $(this).attr("src"); window.location = "yourpage.html?src=" + src; }); }); 参考。

答案 1 :(得分:0)

尝试

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

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

答案 2 :(得分:0)

您的代码中几乎没有错误。 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,它会为您提供所有图片的集合。

然后循环浏览并在addEventListener内添加closure。您还可以使用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
}

DEMO

答案 3 :(得分:0)

表格单元格(即<td>)不能包含 img src 属性。而是使用带有 src 属性的<img>标记。

回答你的问题&#34;:

  

告诉我一种方法来获取该图像的src,当我点击图像,我也想将该src发送到另一个HTML页面

使用JavaScript-我推荐了一种名为Event delegation的技术。使用document.addEventListener()将点击事件的事件处理程序绑定到事件DOMContentLoaded(以了解页面何时加载),然后通过单个回调观察文档的点击次数,如下例所示。这样,整个页面只有一个事件监听器,而不是每个映像一个,这可能导致内存泄漏等。输入的值可以用表单提交或发送到另一个页面(例如,使用AJAX请求) )。

&#13;
&#13;
document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('click', function(event) {
    if (event.target.tagName.toUpperCase() == 'IMG') {
      document.getElementById('imgSrc').value = event.target.src;
    }
  });
});
&#13;
<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&r=PG&f=1 " />
      </td>
    </tr>
    <tr>
      <td>
       2 <img src="https://www.gravatar.com/avatar/616931b5c5ba8790a191fa6aea465c65?s=32&d=identicon&r=PG" />
      </td>
    </tr>
    <tr>
      <td>
        3 <img src="https://www.gravatar.com/avatar/56e1fa920ed4243286b8e62ab4fbdfef?s=48&d=identicon&r=PG&f=1" />
      </td>
    </tr>
  </table>
  Image src:
  <input type="text" id="imgSrc" size="75" />
</div>
&#13;
&#13;
&#13;

如果您使用jQuery之类的JavaScript库,则可以简化代码,如下例所示,使用.ready().val()This article关于事件使用jQuery委派(使用.on()方法)也可能有所帮助。

&#13;
&#13;
$(document).ready(function() {
  $(document).on('click', function(event) {
    if (event.target.tagName.toUpperCase() == 'IMG') {
       $('#imgSrc').val(event.target.src);
    }
  });
});
&#13;
<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&r=PG&f=1 " />
      </td>
    </tr>
    <tr>
      <td>
        2 <img src="https://www.gravatar.com/avatar/616931b5c5ba8790a191fa6aea465c65?s=32&d=identicon&r=PG" />
      </td>
    </tr>
    <tr>
      <td>
        3 <img src="https://www.gravatar.com/avatar/56e1fa920ed4243286b8e62ab4fbdfef?s=48&d=identicon&r=PG&f=1" />
      </td>
    </tr>
  </table>
  <!-- removed 1 from table1 -->
  Image src:
  <input type="text" id="imgSrc" size="75" />
</div>
&#13;
&#13;
&#13;