키 값에 따라 JSON 파일의 값 표시

Question

모든 객체에 3 개의 키와 값이있는 json 파일이 있습니다. 설명, 포스터 이미지 및 장르. 각 개체는 영화 용입니다. 포스터 이미지와 설명을 추가하는 데 성공했습니다. 그러나 이제는 모든 것을 숨기고 링크를 클릭 할 때 특정 "장르"값을 가진 것들을 보여주고 싶습니다. 나는 숨어있는 물건을했다. "드라마"링크를 클릭하면 jquery가 모든 영화 포스터와 설명을 숨 깁니다. 특정 "장르"값을 가진 코드를 다시 표시 할 수있는 코드를 추가하고 싶습니다. 내가 어떻게 해? 지금까지 작성한 코드는 다음과 같습니다. 첫 번째 "드라마"는 링크의 ID이고 두 번째는 "장르"키의 값입니다. 각 "박스"에는 영화 포스터 및 설명이 포함됩니다.

 $("#drama").click(function() { 
 

 
      $(".box").hide(); 
 

 
      if (data.movies.genre === "drama") { 
 
      $(".box").show(); 
 
      }; 
 

 
     });

Answer 1

이렇게 속성을 클릭 이벤트 호출을 사용합니다. 따라서 요소를 만들 때 데이터 장르 특성을 추가하십시오. JQuery는 이러한 속성을 선택할 수 있으며 매우 쉽게 그룹을 숨기거나 표시 할 수 있습니다.

또한 품질을 향상 시키려면 단추/링크에서 동일한 메커니즘을 사용하여 장르를 표시하거나 숨길 수 있습니다. HTML에서

:

<div class="box" data-genre="drama">DRAMA BOX</div> 
<div class="box" data-genre="comedy">COMEDY BOX</div> 
<div class="box" data-genre="drama">DRAMA BOX 2</div> 
<div class="box" data-genre="romance">DRAMA BOX 2</div> 

<button class="filter-button" data-genre="drama">Drama</button> 
<button class="filter-button" data-genre="comedy">Comedy</button> 

JS에서 : 당신은 요소 장르 클래스를 추가 할 수 있습니다

$(".filter-button").click(function() { 
    $(".box").hide(); 
    $(".box[data-genre=" + $(this).data('genre') + "]").show(); 
}); 

http://jsfiddle.net/ukf3dzy2/1/

Answer 2

당신은 자신의 ID로 각 장르 상자 요소의 이름을 지정하고 다음 변경을 처리하는 일반적인 방법을 사용할 수 있습니다.

function showHide(element) { 
    if(element.id == "drama") { 
     $("#dramabox").show(); 
     $("#actionbox").hide(); 
    } elseif (element.id == "action") { 
     $("#actionbox").show(); 
     $("#dramabox").hide(); 
    } 

} 

그런 다음 데이터를 사용할 수

$("#drama").click(function() { 
    showHide(this); 
}); 

$("#action").click(function() { 
    showHide(this); 
}); 

Answer 3

. 요소는 다음 클래스는 요소 클래스에

$("#drama").click(function() { 
    $(".box").hide().filter('.'+data.movies.genre).show(); 
});