attr 显示对象对象的值答案

【问题标题】：Value of attr show object objectattr 显示对象对象的值
【发布时间】：2013-02-04 07:50:20
【问题描述】：

我正在尝试定制一个插件以满足我的需求。我想要做的是当我从一组图像中单击一个图像时，我得到图像的 src 并使用该图像恢复插件。我遇到的问题是当我获得图像的来源时，它给了我 [object object] 而不是实际的来源。我使用 $(this).attr("src") 来获取图片源。

所以基本上我的代码是这样的：

    <div id="images">
      <img src="image1"/>
      <img src="image2"/>
      <img src="image3"/>
      <img src="image4"/>
    </div>

$(document).ready(function(){
  $("#images img").on("click", function(){
    var img_src=$(this).attr("src");
    $("#id").plugin({
      image:img_src
    });
});
});

编辑：我更新了我的代码，以便更清楚我在问什么。

更新：实际上，即使我从中删除了所有其他 js，该代码也不起作用。但它适用于 jsfiddle

更新 2：所以我在整个互联网上寻找解决方案，似乎我正在使用的插件以某种方式覆盖了 attr 函数。有没有办法阻止它这样做？或者创建一个不受插件影响的 jQuery 实例？

【问题讨论】：

你能分享一个到 jsfiddle.net 的链接吗？我想看看this是什么。
'this' 是 $("#images img").on("click", function(){
在你的标签中，尝试包含一个名为“value”的临时属性，这样它就像。然后尝试提醒 $(this).value() 看看你是否得到了正确的值
这破坏了我的代码。使用 .value() 表示没有这样的功能，使用 .value 表示未定义
对不起，在 jquery 中，它应该只是 .val()

标签： javascript jquery attr imagesource

【解决方案1】：

尝试通过输出到控制台来探索该对象的内容。

通过 F12 使用 Firebug for Firefox 或 Chrome 集成开发者控制台。

打开控制台，修改代码：

var img_src=$(this).attr("src");
console.log(img_src);
$("#id").plugin({
  image:img_src
});

并检查输出。

$("img").attr("src") 应该是字符串。

【讨论】：

[img, context: img, jquery: "1.9.0", constructor: function, init: function, selector: ""...] 这是在控制台中打印出来的和其他的包含有关点击图像的各种信息的信息。
@khuderm 你最好在这里发布整个click() 函数，这样我们就可以看到你的this 里面是什么上下文。
记录这个和图像源给出了同样的结果。这是我点击的图像。代码太大，这里不能全部贴出来
它打印的内容基本相同。我不知道怎么给你看
@khuderm 像这样检查每一个可能的原因将花费太多时间。尝试使用最少的代码创建 jsfiddle.net，您可以重现该错误。

【解决方案2】：

这实际上是一个 CSS 选择器问题！

它不会起作用，因为#images img 不会像你预期的那样起作用！！！应该是 img#images 来引用 id 为 images 的 img。

如果你有这样的 HTML：

<img id="img1" class="useImg" src="http://fc01.deviantart.net/fs71/f/2013/032/8/3/papa_happy_by_ovilia1024-d5tfw0h.png" width="30px" height="30px" />
<img id="img2" class="useImg" src="http://fc01.deviantart.net/fs70/f/2013/032/a/b/papa_horrified_by_ovilia1024-d5tfwdt.png" width="30px" height="30px" />

你应该使用：

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

在此处运行演示：http://jsfiddle.net/aM4xw/2/

【讨论】：

但是#images中有很多图片。如何获得正确的图像源？
但是你这样做的方式，我必须为所有图像制作点击事件
@khuderm 我更新了代码，您可以将class="useImg" 设置为您想要选择的图像。

【解决方案3】：

attr 返回一个对象而不是源值的原因是我使用的插件覆盖了 attr 函数。我修改它以将 src 作为字符串而不是对象返回。删除它也解决了问题，但插件需要自定义的。感谢所有试图帮助我的人，我真的很感激。

【讨论】：

但你知道"#images img" 不是明智之举，对吧？