0

jQuery UI スライダーがあります。このコードを使用すると、すべてがうまく機能します。

形

<div class="ui-slide" id="test_div" min="1" max="20" inc="1"></div>
<input readonly="readonly" name="padding" id="padding" type="text" value="5" />

これは、テキスト フィールドの値を取得するために使用する JavaScript コードです。

JS コード

$('div.ui-slide').each(function(i){

    if( $(this).attr('min') != undefined && $(this).attr('max') != undefined ) {

        $(this).slider( { 
                        min: parseInt($(this).attr('min')), 
                        max: parseInt($(this).attr('max')), 
                        value: parseInt($(this).next("input").val()),
                        step: parseInt($(this).attr('inc')) ,
                        slide: function( event, ui ) {
                            $( this ).next("input").val(ui.value);
                        }
                    });

        $(this).removeAttr('min').removeAttr('max').removeAttr('inc');

    }

});

問題：

スライダーとテキストフィールドの両方をテーブル内に配置する必要があります。具体的には、それぞれ独自の「td」に配置する必要があります。これを行うと、上記の JS コードを使用してテキストフィールドの値を取得できなくなります。

<table><tbody><tr>
<td><div class="ui-slide" id="test_div" min="1" max="20" inc="1"></div></td>
<td><input readonly="readonly" name="padding" id="padding" type="text" value="5" /></td>
</tr></tbody></table>

Chrome 開発ツールでこのエラーが発生します。

キャッチされていない TypeError: 未定義のメソッド 'addClass' を呼び出せません

私はそれがこのコード行に関係していると考えました：

value: parseInt($(this).next("input").val()),

テーブルセル内にある次の「入力」の値を取得する方法はわかりません。

4

1 に答える 1

1

乱用する代わりにnext()、テーブル行で適切な入力要素を見つけます。

parseInt($(this).closest("tr").find('input[name="padding"]').val()),

jQuery ドキュメント:

于 2013-10-08T23:27:45.510 に答える