指定したフォームのJquery関数（ページ上に多数のフォームがある場合）

Question

私のページには何度も繰り返すフォームがあります（フォーラムにあります）。内部のテキストエリアでのdivを表示

が値「カスタム」を持つSELECT OPTIONが選択されている

、

• が選択
• 隠す： は、私は基本的に次の操作を行うjQueryの機能のいくつかの種類を構築していますそして焦点それ

入力が不鮮明と空である

• を入力
• を隠し、それを示すことによって、選択を「リセット」し、それがデフォルト（空の値）のSELECTオプション

問題は、私は自分のページ上の一つの形態のためにそれを作った、です。そして、それは動作します。 マルチフォームのテストページで試したところ、私の関数 - すべてのフォームの選択を隠す - 内部にtextareaを持つdivを表示し、すべてのフォームにフォーカスを当てます。

これはもちろん私がやりたいことではありません。

質問：これらの機能をフォーム固有にするにはどうすればよいですか？

以下は私のコードです。あなたの助けのための

jQueryの

$("div[name=customInput]").hide(); 
$("select[name=motifs]").show(); 

$("select[name=motifs]").change(function() 
{ 
    if($("select[name=motifs]").val() == "custom") 
    { 
     $("select[name=motifs]").hide(); 
     $("div[name=customInput]").show(); 
     $("textarea[name=customMotif]").focus(); 
    } 
}); 
$("textarea[name=customInput]").blur (function() 
{ 
    if(!$(this).val()) 
    { 
     $("div[name=customMotif]").hide(); 
     $("select[name=motifs]").show(); 
     $("select[name=motifs] option[name=motif]").attr("selected", "selected"); 
    } 
}); 

$('textarea[name=customMotif]').keyup(function() { 
      var len = this.value.length; 
      if (len >= 150) { 
       this.value = this.value.substring(0, 150); 
      } 
      $('span[name=charLeft]').text(150 - len); 
}); 

HTML

<form action="note.php" method="post" name="notation" id="notation"> 
<select name="motifs"> 
     <option value="" name="void">Motif</option> 
     <option value="custom" name="custom">Custom</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
    <div name="customInput"> 
     <textarea cols="30" name="customMotif"/> 
     </textarea> 
     <span name="charLeft">150</span> Characters left </div> 
</form> 

おかげ。私は初心者であり、物事を正しいものにする方法をまだ学んでいます。どんな助けもありがとうございます。このような

Answer 1

何か作業をする必要があります：

$("select[name=motifs]").change(function() 
{ 
    if($(this).val() == "custom") 
    { 
     var $parentForm=$(this).closest("form"); 

     $parentForm.find("select[name=motifs]").hide(); 
     $parentForm.find("div[name=customInput]").show(); 
     $parentForm.find("textarea[name=customMotif]").focus(); 
    } 
}); 

closestセレクタを満たしている最も近い祖先を取得します。この場合、選択が含まれるフォーム。次にfindを使用すると、セレクタは親フォーム内にのみ存在します。

サイドノートとして、IDは常に一意である必要があります。