1

次のようにレイアウトされたテーブルがあります。

        <td>
                somename
        </td>
        <td class="hoverable value" >
                somevalue
        </td>
        <td class="changed">

        </td>
        <td class="original value">
            <input type="hidden" value="somevalue" />
        </td>

そして、私がやろうとしているのは、ホバー可能な td にカーソルを合わせると、テキストボックスに変わります。ホバーアウトしたら、隠しフィールドの元の値を確認し、2つが互いに異なる場合は画像を変更したいと思います。私はすでにこれを持っています：

$(document).ready( function() {
    var newHTML = '';

    $('table td.hoverable').hover(
    function () {
        var oldHTML = $(this).html().trim();
        $(this).html('<input type=\'text\' value=\'' + oldHTML + '\' size=\'' + ((oldHTML).length + 2) +'\' />');
    },
    function() {
        newHTML = $('input', this).val();
        var oldHTML = $(this).next('td.original').children('hidden').val();
       if(newHTML != oldHTML) {
            $(this).next('td.changed').html('Changed');
        }
        $(this).html(newHTML);
    })
});

しかし、うまくいきません。どうやら失敗したのは、非表示フィールドの値を取得することであり、いくつかの異なる方法で選択しようとしましたが、取得できませんでした。アイデアやヒントをいただければ幸いです ;)

4

4 に答える 4

5

. nextAll()を使用する必要があります

var oldHTML = $(this).nextAll('td.original').find('input:hidden').val();

なんで？.next() は次の要素を取得し、それがセレクターと一致するかどうかを確認しているためです。.nextAll()を使用すると、セレクターに一致する次の要素が取得されます。

于 2010-05-20T17:48:21.080 に答える
1

試す

$(this).next('td.original').find('input:hidden').val();
于 2010-05-20T17:27:31.863 に答える
0 
var oldHTML = $(this).next('td.original').children(':hidden').val();
于 2010-05-20T17:27:44.437 に答える
0

交換

var oldHTML = $(this).next('td.original').children('hidden').val();

と

var oldHTML = $(this).next('td.original').find('input:hidden').val();
于 2010-05-20T17:29:06.320 に答える