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

回答

相關問題