4

我的网站包含很多图片，这就是为什么我不能为每张图片提供 ID，这将是一项乏味的任务。我需要获取图像标签的源属性，但如果没有 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 小提琴链接

4

15 回答 15

6

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

<script>
    function imageInfo(obj)
    {
        alert(obj.src);
    }
</script>
于 2013-08-28T06:50:20.537 回答
5

从你的小提琴，

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

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

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

也不是，onclick要onClick知道原因检查这个SO answer

检查这个小提琴

于 2013-08-28T06:52:40.173 回答
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/

于 2013-08-28T06:53:48.787 回答
2

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

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

<script>
function imageInfo(control)
{
    alert(control.src);
}
</script>
于 2013-08-28T06:49:13.317 回答
2

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

function imageInfo(img)
{
    alert(img.src);
}
于 2013-08-28T06:49:27.583 回答
1

尝试这个。这将对您有所帮助

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

演示Here

于 2013-08-28T06:56:26.997 回答
1 
<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”是保留关键字。

于 2013-08-28T07:38:08.763 回答
1

这将为您src提供在页面上单击的每个图像。但是，您确实需要 jQuery 才能使其工作。

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

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

于 2013-08-28T06:57:40.640 回答
1

尝试这个

 $('img').on('click',function(){
            alert($(this).attr('src'));
        });
于 2013-08-28T06:58:30.813 回答
1

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/

于 2013-08-28T06:59:27.643 回答
1

由于您将其标记为 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')); 
    });
});
于 2013-08-28T06:50:45.623 回答
0

这是你可以做的...

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

于 2013-08-28T07:13:17.743 回答
0

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

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

window.imageInfo = function (source) {
    alert('image');
    alert(source);
}
于 2013-08-28T06:53:12.263 回答
0

尝试这个

<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/

于 2013-08-28T07:00:29.387 回答
-1

检查以下 Js 小提琴

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

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

这是你想要的……如果不是，你能更具体吗？

于 2013-08-28T06:51:33.320 回答