0

ドロップダウン (選択) 要素に関連付けられている、billingOptions() という関数を作成しました。ユーザーがドロップダウンでオプションを選択すると、関数が実行されます。

ドロップダウンは、ページを通じて動的に追加されます...billingOptions() 関数 onChange を追加するたびに。Jquery を使用して、変更されたドロップダウンから class=rate の最も近いインスタンスを見つけようとしています。ドロップダウンは動的に追加されるため、.rate のインスタンスが多数存在する可能性があることに注意してください。

「this」と「closest」を使用して最も近いクラスを見つけようとしました（最も近い関数でクラスを使用できるかどうかさえわかりません）。ここにいくつかのコードがあります：

*** HTML の正確な構造を提供するように求められました (テーブルの行は動的に生成されます。テーブルは静的です)。

<table id="billTasks"> 
<tr> <input class="taskNameInput" type="text" size="52" placeholder="Task Name" name="task:1" disabled="disabled"> <select class="billOptions" onchange="billingOptions(this)">
<option class="fixedRate">Bill Fixed Rate</option>
<option class="hourly">Bill Hourly</option>
</select> 
<input type="text" name="fixedRate" placeholder="Rate" class="fieldWidth100 rate"/> 
</tr> 
</table>

function billingOptions(){
 $(this).closest('.rate').hide();
}

***編集: このコードは機能しません。目標は、input.rate 要素を非表示にすることです。

4

4 に答える 4

1

編集：thisまず、関数に渡されていないという懸念について半分正しいです。渡されていますが、使用されていません。関数に名前付きパラメーターを指定し、代わりにそれを参照しますthis。

function billingOptions(el)
{
    $(el).something()...
}

.rate常に次の要素ですか? もしそうなら：

$(el).next(".rate").hide();

.rateいつも兄弟ですか？.rate兄弟が1人だけになることはありますか？もしそうなら：

$(el).siblings(".rate").hide();

.rate選択したものと共通の親を共有し、その共通の親の唯一のインスタンスになります.rateか? もしそうなら：

$(el).closest(".commonParentClassName").find(".rate").hide();

これらのいずれもうまくいかない場合は、HTML の構造に関する詳細をお知らせください。

編集: HTML の構造を投稿していただきありがとうございます。<td>HTMLに欠落しています。実際のコードに が含まれていると仮定し、行ごとに<td>1 つしかないと仮定して、これを試してください。.rate

function billingOptions(el)
{
    $(el).closest("tr").find(".rate").hide();
}
于 2011-08-07T22:35:20.103 に答える
0

closest() は div で機能しますか? はい、ただし祖先要素用です

.rate 要素が SELECT 要素と同じレベルにある場合は、.siblings() を使用する必要があります。

.rate 要素が SELECT 要素内にある場合は、.children() を使用する必要があります。

.rate 要素が SELECT 要素のすぐ外側にある場合は、.parent() を使用する必要があります。

.rate 要素が SELECT 要素より数レベル上にある場合は、使用する必要があります。closest() を使用して、最も近いものを見つけます。

また、機能は問題ありません。セレクターを更新するだけです。

于 2011-08-07T23:09:12.593 に答える
0

クラスで最も近い作業を行う以外に、実際に質問したことはありません。このフィドルを設定して、それが行われることを示します。

http://jsfiddle.net/JAjFF/

質問が何であるかを教えていただければ、上記のコードを試しましたか?動作しますか? そうでない場合、何が問題ですか？それから私は私の答えを修正します。

于 2011-08-07T22:27:55.477 に答える
0

コードが何をしようとしているのかを正確に知ることは困難ですが、いくつかの問題があります。

まず、関数に DOM 要素を渡していますが、関数にはパラメーターが宣言されておらず、渡した引数にアクセスしていません。また、thisこのコンテキストでは、必要な要素ではなく Window オブジェクトを参照しています。 . これに変更する (名前付き引数を渡し、それを の代わりに使用するthis) と、次のように解決されます。

function billingOptions(elem){
   $(elem).closest('.rate').hide();
}

名前付き引数を使用する代わりにコレクションを使用することもできますがarguments、それよりも上記の方法をお勧めします。

次の問題は、closest渡されたセレクターに一致する最初の要素が見つかるまで、メソッドが DOM ツリーを上っていくということです。あなたの場合、thisWindow オブジェクトを参照するとclosest、セレクターに一致する祖先が見つかりません。

.rateコードを見ると、選択した要素の祖先ではないため、上記の関数がその問題を解決する可能性は低いです。正しい要素を選択するのに役立つように、HTML がどのように構成されているかについて、より多くの情報が本当に必要です(たとえば、 と同じコンテナー内.rateに常に単一の要素が存在するのでしょうか? その場合、ここに実際の例があります)。.rateselect

于 2011-08-07T22:35:43.173 に答える