jQuery - 클래스의 마지막 숫자를 사용하여 여러 연관된 클래스를 찾으십니까?

Question

나는 다음과 같은 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"와 스팬은 디스플레이로 설정됩니다. EDIT1가 클릭하면

가

• ,이 기간 숨겨진되고, 클래스 "hide1"와 관련된 범위가 표시됩니다 : jQuery를 사용하여이 코드 내에서
  는, 나는 다음을 수행하려합니다.
• 코드의 다른 모든 기간에 대해 동일해야합니다. 예 : edit2 및 hide2. 또한 추가 편집 및 숨기기 클래스를 추가하려면이 함수도이를 처리 할 수 ​​있어야합니다. edit3과 hide3 등등.

지금까지 클릭 한 편집 범위를 찾아 숨길 수있었습니다. 나는 관련된 "hide"클래스를 얻으려고 고심하고있다. 누구든지이 일을 도와 줄 수 있니? 여기 내 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

내가 전에 비슷한 짓을했는지, 그것은 쉬웠다 그래서 :

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

그런 다음이 같은 관련 클래스를 찾을 수 있습니다

$(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(); 
    }); 
}); 

을 나는이 테스트를하지 않은하지만 당신은 아이디어를 얻을. 한 가지 다른 점은 var에 $ (this)를 할당 할 필요가 없다고 생각합니다. 귀하의 코드에서 보증 할 수있는 사항이 없습니다.

희망이 도움이

편집 : 클릭에 편집 사업부를 숨길 잊으 코드가 업데이트

2 편집 : Woops, 또한, 가까운 브래킷을 놓친 잘 작동 : 문자열에 +1이 필요 지금 - 여기까지 예를 있어요 : D

Answer 2

내가 앞서 간 및 한 약간 변경 : 당신이 대답을 얻었다하지만 닫히지 않은 브래킷이 밤에 깨어 날을 유지하기에 충분 것을 지금 무관 한 비트가 http://jsfiddle.net/rYMtq/

귀하의 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(); 

});