jQuery的遍历

我有几个行的表：jQuery的遍历

<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 src名称与300.

我的问题是从单击的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"); 
});

和产生的控制台输出：

Console output

但是，这似乎并没有被我所需要的。我想我需要得到的东西看起来像：

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

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

感谢您的任何帮助。

来源

2013-03-27 Steve

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

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

您还可以得到src属性出使用.attr('src')

来源

2013-03-27 03:41:36 Blender

使用get(0)获得DOM jQuery对象的对象的图像：

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

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

http://jsfiddle.net/xyH6v/

来源

2013-03-27 03:42:13

我改变了一些代码行，以获得所需的src和更改属性

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

来源

2013-03-27 03:43:11 theshadowmonkey

这是什么'$（this +'> img'）'。我无法想象那是有效的。 – jfriend00 2013-03-27 03:56:39

@ jfriend00对不起，只是访问$（this）的直接孩子....改变了代码以反映这一点。请让我知道如果这不适用这里 – theshadowmonkey 2013-03-27 03:58:55

你也不能'$（imgNode +'> img'）'。选择器是字符串，它们中没有jQuery对象或DOM节点。这不起作用。 – jfriend00 2013-03-27 04:03:20

的关键是，你用$(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-27 03:59:06 jfriend00

回答

相关问题