2017-10-07 1 views
0

제가 작업 한 작은 사이트에서 문제가 있습니다. "콘텐츠"의 "카드"를 보유하는 일종의 "스트림"컨테이너가 필요합니다.이 "콘텐츠"는 일부 "텍스트"및 일부 "통계"입니다.컨테이너 div에서 특정 하위 div에 액세스하려고 시도했습니다.

<div id="stream"> 
 
    <div class="card"> 
 
    <div class="content">content 
 
     <div class="text"> 
 
     blahblahblah 
 
     </div> 
 
     <div class="stats"> 
 
     blahblahblah 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="card"> 
 
    <div class="content">content 
 
     <div class="text"> 
 
     blahblahblah 
 
     </div> 
 
     <div class="stats"> 
 
     blahblahblah 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="card"> 
 
    <div class="content">content 
 
     <div class="text"> 
 
     blahblahblah 
 
     </div> 
 
     <div class="stats"> 
 
     blahblahblah 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

는 결국, 나는 사용자뿐만 아니라이 "스트림"에 "카드"를 앞에 추가 할 수 있도록하려면 :

내가 현재 가지고있는 HTML이다.

그러나 지금은 클릭 할 때까지 카드의 "통계"를 숨기는 jQuery 함수를 구현하려고합니다. 그래서 통계의 CSS에 없음으로 표시를 설정 한 후, 나는 자바 스크립트 파일이 만들어 :

$(document).ready(function(){ 
 
    $("#stream, div.card").click(function() { 
 
    \t \t $(this).find($("div.stats")).show(); 
 
\t }); 
 
});

그것은 일종의 작동; 카드를 클릭 할 때까지 카드의 통계는 숨겨집니다. 그러나 카드를 클릭하면 모든 카드의 통계 div가 표시됩니다.

클릭 한 특정 카드가 표시되는 (유일한) 카드인지 어떻게 든 알기를 바랬습니다. 분명히, 내가 현재하고있는이 방법은 모든 카드를 jQuery로 열기 때문에 모든 카드를 한 번에 선택했다. 이 문제를 어떻게 해결할 수 있습니까?

다시 한 번,이 질문에 대해 사과드립니다. 나는 비슷한 것을 발견 할 수 없었고 실제로 이것을 원합니다. . .

P. 이 특정 인스턴스를 검색하려고했습니다. als of suggestions는 divs id를 제공하는 것이었지만, 결국 사용자가 카드를 prepend하기를 원할 때 불편 함을 느낍니까?

+1

$ ("# stream div.card"). (function() {$ (this) .find ("div.stats"). show();});' , '를 선택합니다. 그리고'$ '를 찾을 필요가 없습니다. – Keith

+1

당신은 내 하루를 만들었습니다! 고마워요, 작동합니다! 이 게시물을 귀하의 의견으로 어떻게 해결할 수 있습니까? –

+1

빠른 답변을 드리겠습니다. – Keith

답변

2

당신의 선택 ->

"#stream, div.card"

는 기본적으로 모든 #stream 모든 div.card .. 을 요구하지만 당신이 정말로 의미하는 것은이었다 #stream 내부의 모든 div.card을 발견했다. 그리고 이것은 (aka 없이는).

"#stream div.card"

은 또한 JQuery와 발견은 JQuery와 객체로 변환 할 필요하므로 트릭을 할 것입니다 ("div.stats")를 찾을 수 없습니다.

관련 문제