1

多くのセクションを持つフォームに取り組んでいます。各セクション内には、ユーザーが使用したい単位 (ポンド/オンス vs kg など) を示すラジオ ボタンがあります。彼らがユニットをクリックすると、同じセクション内のすべての入力を hide() してから、関連するものを show() したいと思います。

私はそれを働かせることができません。要素を選択していないため、 find() 関数を誤解していると思います。

var show_hide_units = function (selectedUnitElement) {
    $element = $(selectedUnitElement);
    unit_class = $element.attr("class");
    $section = $($element.parents('.measurement'));
    $inputs = $($section.find('.inputs *'));
    $inputs.hide();
    $inputs.find('.' + unit_class).show();
};

これは、より多くのコンテキストを示すフィドルです: http://jsfiddle.net/32Q9t/

どんなポインタでも大歓迎です。

4

3 に答える 3

1

http://api.jquery.com/find/ :

.find( selector ) 説明: セレクター、jQuery オブジェクト、または要素によってフィルター処理された、一致する要素の現在のセット内の各要素の子孫を取得します。

したがって、$('.youClass')ターゲット要素を一致させるために使用してください。

var show_hide_units = function (selectedUnitElement) {
    var targetClass = $(selectedUnitElement).attr('class');
    $('.inputs > *').hide();
    $('.' + targetClass).show();
};

分岐したフィドルを使用します: http://jsfiddle.net/BE8ZV/

于 2013-03-29T20:56:53.680 に答える
0

JavaScript デバッガーの使い方を知っていますか? それがあなたの質問に対する本当の答えです。開始方法は次のとおりです。フィドルで、この更新されたフィドルのように、関数debugger;の先頭にステートメントを挿入します。また、コードにいくつかの小さな変更を加え、欠落している宣言を追加し、2 行の冗長なラッパーを削除しました。( orからの戻り値は、すでに jQuery オブジェクトです。)show_hide_units()var$().parents().find()

私がしなかったことは、バグを修正することです。開始方法は次のとおりです。そのページを Chrome にロードし、開発者ツールを開きます。次に、ラジオ ボタンの 1 つをクリックすると、そのdebugger;ステートメントで停止します。そこから、変数にカーソルを合わせて変数を調べたり、コードを 1 ステップ実行したり、あらゆる種類の便利なことを実行したりできます。しばらくそこを調べてみると、バグが見つかるはずです。見つからない場合は、デバッガーで発見したことを報告してください。さらに詳しく調べることができます。

于 2013-03-29T20:55:14.077 に答える
0

すべての要素を非表示にすることを選択した場合'.inputs *'(これは最も単純な解決策ではありません)、非表示で「表示」されている要素は実際には表示されないため、何を行うかについてより多くの入力を表示する必要があります。

$inputs.parent().find('.' + unit_class+', .' + unit_class+' *').show();

デモンストレーション

より簡単な解決策は、要素の 1 つのレベルのみを非表示/表示することです。

$('.inputs > *').hide();
$('.inputs > .'+unit_class).show();

デモンストレーション

于 2013-03-29T20:59:21.523 に答える