Jquery를 사용하여 여러 클래스의 단일 인스턴스를 타겟팅하십시오.

Question

저는 클릭 할 때 캡션을 표시하거나 숨기는 캡션 모듈을 디자인하고 있습니다. 애니메이션이 완료된 후 토글을 트리거하는 버튼의 텍스트를 변경하고 싶습니다.

버튼의 인스턴스가 하나 존재하면 아래가 작동하지만 더 많은 인스턴스가 있으면 텍스트가 변경되지 않습니다. DOM을 통해 움직이는 것에 대한 확실한 이해가 없습니다. $(this)을 사용하여 활성 버튼을 타겟팅하려면 어떻게해야합니까?

편집 : 나 자신과 같은 다른 초보자들에게 이것은 JS 문제가 아니라 DOM 문제입니다.

JS :

$('.btn').click(function(){ 
    $(this).siblings('.caption').animate({ 
     height: 'toggle' 
     }, 200, function() { 
     // After animation is done: 
     if($('.btn').text() == 'Hide'){ 
     $('.btn').text('Show'); 
     } else { 
     $('.btn').text('Hide'); 
     } 
    }); 
}); 

HTML :

<div class="container"> 
    <ul class="slides"> 
     <li>...</li> 
    </ul> 
    <div class="caption"> 
     <p class="txt"><span class="details">...</span></p> 
    </div> 
    <div class="btn"> 
     <p class="txt">Hide</p> 
    </div> 
</div> 

은 내가 잘못 무엇인지에 빠른 설명을 감사하겠습니다. 감사!

Answer 1

상기 외부 기능 $(this) 참조 저장해 :

$('.btn').click(function(){ 

var self = $(this); 

self.siblings('.caption').animate({ 

    height: 'toggle' 

    }, 200, function() { 

    // After animation is done: 

    if(self.text() == 'Hide'){ 

    self.text('Show'); 

    } else { 

    self.text('Hide'); 
    } 
}); 

을});

Answer 2

나는 아래에 표시된 라인 대신에 $의 (이) $를해야한다고 생각 ('BTN를.') :

$('.btn').click(function(){ 
    $(this).siblings('.caption').animate({ 
     height: 'toggle' 
     }, 200, function() { 
     // After animation is done: 
     if($(this).text() == 'Hide'){ //<-- changed this line 
     $(this).text('Show');  //<-- changed this line 
     } else { 
     $(this).text('Hide');  //<-- changed this line 
     } 
    }); 
}); 

당신이 지금 가지고있는 방법, 그것은 .btn의 모든 항목을 선택하는 것입니다 그리고 배수가 있기 때문에 어느 것을 변경할 지 모릅니다.

Answer 3

내부 기능 animate 기능이 클릭하면 .btn의 기능을 잃게됩니다.

클릭 버튼을 기억하려면 클릭 한 타겟보다 먼저 var을 저장하십시오.

var btn = $(this) 

btn으로 전체 기능의 버튼에 액세스 할 수 있습니다.