根据键的值显示 JSON 文件中的值

Question

我有一个 json 文件，每个对象都有 3 个键和值。描述、海报图像和流派。每个对象都是电影。我成功地附加了海报图片和描述。但现在我想将它们全部隐藏，然后在单击 link 时显示具有特定 "genre" 值的那些。我做了隐藏的东西。当我点击 "drama" link 时，jquery 隐藏所有电影海报和描述。我想添加可以再次显示具有特定 "genre" 值的代码。我该怎么做？到目前为止我写的代码如下。第一个 "drama" 是 link 的 ID，第二个是 "genre" 键的值。每 "Box" 包括一张电影海报和描述。

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

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

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

        });

Answer 1

您可以用自己的 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 2

您可以使用数据属性来执行此操作。因此，当您构建元素时，请添加 data-genre 属性。 JQuery 可以 select 这些属性，你可以很容易地 hide/show 一组。

此外，为了提高质量，您可以在 button/link 到 show/hide 流派上使用相同的机制。

在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 3

您可以在元素上添加 class 流派。元素可以有多个 classes

<div class="box drama">

然后过滤 class 以显示

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

根据键的值显示 JSON 文件中的值

Showing values from a JSON file according to their value of a key

javascript

jquery

json