0

我正在尝试自定义一个插件以满足我的需求。我想要做的是，当我从一组图像中单击图像时，我得到图像的 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 实例？

4

3 回答 3

2

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

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

打开控制台，修改代码：

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

并检查输出。

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

于 2013-02-04T07:55:16.147 回答
1

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

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

因此，如果您有这样的 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/

于 2013-02-04T08:07:02.440 回答
0

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

于 2013-02-04T09:53:32.830 回答