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の幅を指定します）。どちらかの行の2番目のtdをクリックして、選択した2つの行のどちらかを検出し、その行のsrc画像を同じ画像のより大きなバージョンに置き換える、つまり72を置き換えるjQueryを作成したいと思います。 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');
});

フィドルのURLはhttp://jsfiddle.net/8fd8Q/1/です。

于 2013-03-27T03:43:11.420 に答える