1

我有一个有几行的表：

   <tr class='data'>
        <td class='img'><img class='thumbnail' src='ProductImages/img_1894_72.jpg'/></td>
        <td class='bc_img'><img class='thumbnail' src='ProductImages/img_1893_72.jpg'/></td>
   </tr>

    <tr class='data'>
        <td class='img'><img class='thumbnail' src='ProductImages/img_1318_72.jpg'/></td>
        <td class='bc_img'><img class='thumbnail' src='ProductImages/img_1646_72.jpg'/></td>
    </tr>

单元格中的图像是缩略图（名称中的 72 指定 72px 宽度）。我想写一些 jQuery，让我单击任一行中的第二个 td，感知我选择的两行中的哪一行，然后用同一图像的更大版本替换该行中的 src 图像，即替换 72 in带有 300 的 src 名称。

我的问题是从单击的 td 到该 td 中的原始 img 节点。我一直在玩：

$("td.bc_img").click(function () {
    console.log("1. this is " , this);  
    imgNode = $(this).find('img').get();
    console.log("2. imgNode is " , imgNode);
    console.log("3. imgNode.src is " , imgNode.src);
    var thumbSrc = ?;  // not sure how to get this
    var bigImgSrc = thumbSrc.replace(/_72\.jpg/, "_900.jpg");
});

这会产生控制台输出：

控制台输出

但这似乎不是我需要的。我想我需要得到一些看起来像：

              <img class="thumbnail" src="ProductImages/img_1893_72.jpg">

在我可以将 .src 添加到它并修改 src 之前。

谢谢你的帮助。

4

4 回答 4

2

关键是您用来$(this).find("img")在收到点击的单元格中查找图像。

$("td.bc_img").click(function () {
    var img = $(this).find("img").get(0);
    img.src = img.src.replace(/_72\.jpg/, "_900.jpg");
});
于 2013-03-27T03:59:06.410 回答
1

您的选择器正在返回一个没有src属性的元素数组（注意美化控制台文本周围的方括号）。获取该数组的第一个元素（或使用.get(0)，它做同样的事情）：

> $('img').get();
[img]
> $('img').get()[0];
<img src="foo.jpg" />
> $('img').get(0);
<img src="foo.jpg" />

您还可以src使用 jQuery 对象获取属性.attr('src')

于 2013-03-27T03:41:36.337 回答
1

用于get(0)获取图像的 DOM 对象：

imgNode = $(this).find('img').get(0);

现在我相信 的值thumbSrc可以设置为imgNode.src。

http://jsfiddle.net/xyH6v/

于 2013-03-27T03:42:13.863 回答
1

我更改了一些代码行以获取所需的 src 并更改属性 

$("td.bc_img").click(function () {
        console.log('rw');
        imgNode = $(this).find('img').attr('src');
        console.log("The image node source is " , imgNode);
        $(this).find('img').attr('src', 'put your replacement url here');
});

小提琴网址是http://jsfiddle.net/8fd8Q/1/

于 2013-03-27T03:43:11.420 回答