jQuery - クラスの最後の桁を使用して複数の関連するクラスを見つけるか？

Question

I次のHTMLコードを持っている：ページのロードでなし：

  <fieldset> 
       <legend><span>Contact Details</span> <span class="edit1">Edit</span><span class="hide1">Hide</span></legend> 
       <div> 
       <!--content--> 
       </div> 
      </fieldset> 


      <fieldset> 
       <legend><span>Contact Details</span> <span class="edit2">Edit</span><span class="hide2">Hide</span></legend> 
       <div> 
       <!--content--> 
       </div> 
      </fieldset> 

クラス「hide1」と「hide2」とのスパンが表示されるように設定されています。私は次の操作を実行しようとしています。このコードの中で

は、jQueryのを使用して、：

• EDIT1がクリックされた場合、このスパンは、隠れになり、クラス「hide1」と関連したスパンが見えるようになります。
• これはコード内の他のすべてのスパンで同じにする必要があります。 edit2とhide2。さらに編集と非表示のクラスを追加したい場合、関数はこれも処理できます。 edit3とhide3など。

これまでのところ、クリックして編集したスパンを見つけることができました。私は、関連する「隠す」クラスを得るのに苦労しています。誰も私を助けてくれますか？ここに私のjQueryの機能は、これまでである - などの選択を支援するためにIDを使用しても、アンダースコア、すなわち、私はいくつかの方法でクラス名を区切るためにため

 var spans = $("#myIntForm").find("span[class^='edit'],span[class^='hide']"); 

     spans.click(function() { 
      var $this = $(this); 
      spans.filter("span[class^='hide']").hide(); 
      if($this.attr('class').substr(0,4)=='edit') 
       { 
        var visible = $this.filter("span[class^='"+$this.attr('class').substr(0,4)+"']"); 
        visible.hide(); 

        //find the class 'hide' with same ending number as class 'edit' and display it. 
        var invisible; 
       } 
     }); 

Answer 1

は私が前に似た何かをやった、それは簡単でしたそう：私はこれをテストしていませんが、あなたのアイデアを得る

$(function(){ 
    $('.hide').hide(); 
    $('.edit').click(function(){ 
    //each time an edit class is clicked, show its associated hide div 
    var aNum = $(this).attr('id'); 
    //get the number at the end of the ID of this particular edit div   
    aNum=(aNum.substring(aNum.indexOf('_')+1, aNum.length)); 

    //select and show the associated hide_1 div 
    $('#hide_'+aNum).show(); 

    //hide $(this) 
    $(this).hide(); 
    }); 
}); 

：

<span class='edit' id='edit_1'>Edit 1</span> 
<span class='hide' id='hide_1'>Hide 1</span> 

次に、あなたは、このような関連クラスを見つけることができます。 もう1つのポイントは、あなたは$（this）をvarに割り当てる必要はないと思っています。あなたのコードには、それを保証するものは何もありません。

・ホープこのことができます

EDIT：クリックで編集のdivを非表示に忘れ、コードが更新さ

第二編集：Woops、また、閉じ括弧を逃し正常に動作します:)部分文字列の1を必要と今 - ここでの例を得た： http://jsfiddle.net/rYMtq/

を少し無関係な今、あなたは答えを得たが、閉じられていないブラケットが夜に目を覚まし私を維持するのに十分であること：D

Answer 2

は、私は先に行って、ビットを変更しましたあなたのjQueryコードの。ここには実例があるjsfiddleがあります。それが役に立てば幸い。

var $spans =$("#myIntForm").find("span[class^='edit'],span[class^='hide']"); 

$spans.click(function() { 
    var $this = $(this), 
     $hideSpan = $this.siblings('span[class^="hide"]'), 
     $editSpan = $this.siblings('span[class^="edit"]'); 

    $this.toggle(); 
    $hideSpan.toggle(); 
    $editSpan.toggle(); 

});