2017-04-10 2 views
0

저는 JQuery에 익숙하지 않아 요소를 표시하고 숨기는 데 도움이 필요합니다.요소 표시 및 숨기기 if 문 JQuery

목표 :

위젯 제목 = 필터 선택 다음이 내가 가진 무엇

숨길 위젯 다른 보여 주면 :

if ($('widget-title',element) === ($('.uc-box-text'.title(),element){ 
    (i have no clue how to tell it to show just this widget with this title particular).show() 
else 
    (widget).hide() 

내가 아무 일도 발생하지 테스트 할 때, 나는 그 위젯뿐만 아니라 그 제목을 어떻게 말할 지 모른다.

모두 도와 주시겠습니까?

html로는 긴하지만이 위젯에 대한 코드입니다

<widget type="pivot" subtype="pivot" family="" widgetid="58e69a5730a1e50000001015" class="widget columnar" data-ng-class="{refreshing:widget.refreshing, hidden:layoutState.resizing || layoutCellState.resizing || layoutSubCellState.resizing, 
renderMode: dashboard.renderMode, 'has-breadcrumbs': widget.metadata.isDrilled()}" data-ng-controller="dashboard-layout.controllers.columnar.widget" columnar-widget="" data-ng-style="{height: widgetHeight}" dashboard-columnar-draggable="" data-ng-repeat="element in subcell.elements" style="position: relative; height: 121px;"> 

<widget-header style="width: 100%; background-color: rgb(84, 84, 84); border-left: 8px solid rgb(28, 145, 192);"> 

<widget-title style="float: left; font-family: opensansregular; font-weight: normal; font-size: 16px; color: rgb(238, 238, 238); vertical-align: middle; text-align: left;" data-ng-hide="layoutState.minSizeReached" title="TEST" class="">TEST</widget-title> </div> 
+1

를 사용할 수 있습니다. – Aj334

+0

'.toggle()'을 사용하여 if 조건을 피할 수 있습니다. – funcoding

+0

"* 초보자를위한 좋은 JQuery를 추천 해 주시겠습니까? *"- 아니요, 몇 개월, 몇 주 또는 며칠 만에 어떤 권고안이 오래되어서는 안되기 때문입니다. ''에서' '까지 이동하는 데 도움이되는 것처럼, 조상 - 자손 또는 형제 자의 여부와 관계없이 DOM에 관련되어 있음을 보여줘야합니다. –

답변

0

당신의 HTML을 보지 않고 당신에게 정확한 대답을 할 수 없다, 그러나 이것은 당신이 시작 얻어야한다 :

$(function() { 
 
    $('.widget').each(function() { 
 
    var widgetTitle = $('h2',this).text(); 
 
    if (widgetTitle === 'Widget One') { 
 
     $(this).hide(); 
 
    } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="widget"> 
 
    <h2>Widget One</h2> 
 
    <p>This widget <strong>will not</strong> be shown</p> 
 
</div> 
 

 
<div class="widget"> 
 
    <h2>Widget Two</h2> 
 
    <p>This widget <strong>will</strong> be shown</p> 
 
</div>

+0

'토글 (widgetTitle === '위젯 원')'너무! – funcoding

+0

그래, 그건 또한, 그것은 단지 반비례 것 : '$ (this) .toggle (widgetTitle! =='Widget One ');' – APAD1

-1

jQuery는 ID, 클래스 등을 사용하여 특정 요소를 선택합니다. 함께 작업하려는 요소에 클래스 또는 ID를 사용하는 것이 좋습니다.

<widget id='my-widget'... 

그럼 당신은 당신이뿐만 아니라 위젯에 대한 HTML을 게시 할 수 있다면 좀 더 도움이 될 것입니다

$("#my-widget").show(); 
+0

내 downvote 아니지만 대부분의 경우 일반 구조 중 하나를 사용하여 'id' 또는'class'는 불필요합니다 (항상 그런 것은 아니지만 종종). –