2016-08-21 5 views
0

위키피디아 API를 사용하여 프로젝트를하고 있습니다. 검색 표시 줄에 단어를 입력하면 항목 목록이 표시됩니다. 아래 그림과 같습니다. Image one 사용자가 "more"div 위로 마우스를 가져 가면 추가 콘텐츠가 아래에 표시됩니다. 그런 식으로. Image two단락에 텍스트가 포함되어 있지 않으면 div를 숨기기

그러나 파란색 색상의 일부 항목에는 정보가 없습니다. 즉, 비어 있습니다. 그래서 나는 추가 정보를 포함하지 않는 항목에 대해 "more"div를 표시하지 않기를 원합니다. 그래서 코드를 작성했습니다. 그러나 불행히도 그것은 작동하지 않습니다.

if ($('.list-container>div.titleDesc>p').is(':empty')) { 
     $(".show-more").hide(); 
} 

무엇이 잘못되었는지 파악할 수 없으므로 도움이됩니다. 자세한 정보가 필요하면 Codepen의 project을 참조하십시오. 당신은 당신이 검색을 인쇄 한 후이 코드를 사용하기 위해 필요한이

$('.list-container>div.titleDesc>p').each(function() { 
if ($(this). text() == "") { 
    $(this). hide() ; 
} 
}) 

처럼 사용할 수 있습니다

+1

호버가 약간 버그가있는 것 같습니다. 정확하게 '더'섹션의 왼쪽에 마우스를 올리면 작동합니다. – Roberrrt

+0

또한 [the : empty pseudoselector] (https://developer.mozilla.org/en-US/docs/Web/CSS/:empty) –

+0

을 사용하면 너무 많은 코드를 디버그하기가 어렵습니다. 보여줄 정보가 있다면 쇼 버튼의 크리 톤을 더 확인할 수 없습니까? –

답변

2

jQuery를 :empty()은 선택입니다 결과; 따라서, 에서 작동합니다. jQuery 요소. 그래서, 당신은이 라인을 업데이트해야합니다

$(this).text().is(':empty') 

이 라인 :

여기
$(this).is(':empty') 

Working Demo, 난 그냥이 라인을 JS 업데이트하고, 용기를 div 요소를 추가했다.

+0

도움을 주셔서 감사합니다! 디버거는 무엇을 의미합니까? – NZMAI

+0

직접 브레이크 포인트 (파란색 화살표)를 입력하는 대신 JS 코드를 디버깅하는 키워드입니다. 다음을 확인하십시오 : http://www.w3schools.com/jsref/jsref_debugger.asp –

+0

이제 분명합니다. 감사! – NZMAI

0

+0

아쉽게도 작동하지 않습니다. 어쨌든 도움을 주셔서 감사합니다! – NZMAI

관련 문제