Question

我的网站包含很多图片，这就是为什么我不能为每个图片提供ID这将是繁琐的任务。我需要获取图像标记的source属性，但是如果没有ID我就无法做到。我确实尝试过attr（）和getAttribute（），但它似乎对我没用。

我的代码

<img src="./images/image1.jpg" width='100' height='100' alt='Sample image' onClick='imageInfo(this);'>

<script>
function imageInfo()
{
    alert(this.src);
}
</script>

我正在尝试获取图片标记的来源，但它没有来我也试过jsfiddle，但它没有用。

JS FIDDLE LINK

Answer 1

尝试这样的事情。因为您已经传递了图像对象但未在函数中使用

<script>
    function imageInfo(obj)
    {
        alert(obj.src);
    }
</script>

Answer 2

从你的小提琴，

function imageInfo(this)
{
    alert('image');
    alert(this.src);
}

这是因为this是保留关键字。

 function imageInfo (e)
{
    alert('image');
    alert(e.src);
}

同样 onclick 而不是onClick，要知道检查此SO answer的原因

检查此Fiddle

Answer 3

您可以随时执行此操作：

<强> HTML

<img src="https://www.google.ca/images/srpr/logo4w.png" width='100' height='100' alt="Sample image">

<强>的JavaScript

$('img').click(function() {
    window.alert($(this).attr('src'));
});

http://jsfiddle.net/QB6Da/

Answer 4

要修复代码，您需要将控件传递给javascript函数：

<img src="./images/image1.jpg" width='100' height='100' alt='Sample image' onClick='imageInfo(this);'>

<script>
function imageInfo(control)
{
    alert(control.src);
}
</script>

Answer 5

在您的示例中，您必须将单击的Object作为函数的参数：

function imageInfo(img)
{
    alert(img.src);
}

Answer 6

由于您将此标记为jQuery，因此应该可以使用：

http://jsfiddle.net/LgLzh/20/

$(function() {
    $('img').each(function() {
        console.log($(this).attr('src')); 
    });
});

或者，如果您想点击它时做出反应：http://jsfiddle.net/LgLzh/26/

$(function() {
    $('img').on('click', function() {
        console.log($(this).attr('src')); 
    });
});

Answer 7

试试这个。这对你有帮助

  $('img').click(function() {
        alert(this.src); 
});

演示Here

Answer 8

这将为您提供点击页面上每张图片的src。但是你需要jQuery来实现它。

$('img').on('click', function (event) {
    console.log(event.target.src);
});

http://jsfiddle.net/LgLzh/42/

Answer 9

试试这个

 $('img').on('click',function(){
            alert($(this).attr('src'));
        });

Answer 10

在所有onclick function中使用img tags并不是一个好方法，因为如果你做一个小改动就会有噩梦。添加一个类，然后使用jquery，你可以让它工作。请参阅以下内容。

使用class属性：

<img src="http://4.bp.blogspot.com/-uyvTMZ3dFPs/UKHsc_ZbysI/AAAAAAAACvo/QdVAlVBbUxE/s320/1hello.jpg" class="image"/><br>
<img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" class="image" /><br>
<img src="http://www.find-a-job-online.org/images/picture.gif" class="image"/>

脚本：

$(".image").click(function(){
   var src = $(this).attr('src');
   alert("SRC = " + src);
});

小提琴：http://jsfiddle.net/yL5cf/6/

Answer 11

<img src="http://4.bp.blogspot.com/-uyvTMZ3dFPs/UKHsc_ZbysI/AAAAAAAACvo/QdVAlVBbUxE/s320/1hello.jpg" width='400' height='400' alt='Sample_image' class="img">

其他答案简短而正确，但是你想使用jQuery ......

$(document).ready(function(){
    function imageInfo(img)
        {
            var src = $(img).attr("src");
            alert(src);
        };
    $(".img").click(function(){
        imageInfo(this);
    });
});

并且，“this”是保留关键字。

Answer 12

http://jsfiddle.net/LgLzh/25/

由于多种原因，您应该将功能定义到窗口区域。

window.imageInfo = function (source) {
    alert('image');
    alert(source);
}

Answer 13

试试这个

<img src="http://4.bp.blogspot.com/-uyvTMZ3dFPs/UKHsc_ZbysI/AAAAAAAACvo/QdVAlVBbUxE/s320/1hello.jpg" width='400' height='400' alt='Sample_image'>

$(document).ready(function(){
    $('img').click(function(e){        
        alert($(this).attr('src'));
    });
});

不要忘记包含jquery来运行它。这是小提琴http://jsfiddle.net/LgLzh/44/

Answer 14

这是你可以做的......

$('img').bind('click',function(){ console.log($(this).attr('src')); });

Answer 15

检查以下Js小提琴

http://jsfiddle.net/LgLzh/22/

$('img').filter(function(){
        alert($(this).attr('src'));
    });

这就是你想要的......如果你不能更具体吗？

如何在没有ID的情况下获取div的属性

15 个答案: