Question

我有一个json文件，每个对象都有3个键和值。描述，海报图像和流派。每个对象都用于电影。我成功地附上了海报图片和描述。但现在我想隐藏所有这些，然后在点击链接时显示具有特定“类型”值的那些。我做了隐藏的东西。当我点击“戏剧”链接时，jquery会隐藏所有电影海报和描述。我想添加可以再次显示具有特定“流派”值的代码。我该怎么做？我到目前为止写的代码如下。第一个“戏剧”是链接的id，第二个是“流派”键的值。每个“盒子”都包含电影海报和描述。

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

Answer 1

您可以使用数据属性来执行此操作。因此，在构建元素时，请添加data-genre属性。 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

您可以在元素上添加类型的类。元素可以有多个类

<div class="box drama">

然后过滤该类以显示

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

根据密钥的值显示JSON文件中的值

3 个答案: