Question

如果div过滤器中有一个类属性，那么效果很好。但是，如果我想添加第二个属性，它会让人感到困惑。

我有很多车被div列出。 #parent的子div有一个属性，它是过滤的标志。

这是html代码：

<button class="active btn" id="all">All</button>
<button class="btn" id="Manual">Manual</button>
<button class="btn" id="Automatic">Automatic</button>
<div id="parent">
  <div class="Manual">something</div>
  <div class="Automatic">something</div>
  ....
</div>

按下按钮过滤器按属性显示或隐藏div。这是jquery：

var selectedVehicleTypes = ["all"];
var $btns = $('.btn').click(function () {
if (this.id == 'all') {
    $('#parent > div').fadeIn(450);
    selectedVehicleTypes = ["all"];
    $(".btn").removeClass("active");
    $(".btn").first().addClass("active");
}
else {
    var allIndex = $.inArray("all", selectedVehicleTypes);
    if (allIndex > -1) {
        selectedVehicleTypes.shift();
        console.log(selectedVehicleTypes);
    }

    var catIndex = $.inArray(this.id, selectedVehicleTypes);
    if (catIndex > -1) {
        selectedVehicleTypes.splice(catIndex, 1);
    }
    else {
        selectedVehicleTypes.push(this.id);
    }

    if (selectedVehicleTypes.length == 0) {
        $('#parent > div').fadeIn(450);
        selectedVehicleTypes = ["all"];
        $(".btn").removeClass("active");
        $(".btn").first().addClass("active");
    }
    else {
        $(".btn").each(function (index, el) {
            if (this.id.length > 0) {
                var selector = "." + this.id;
                var btnIndex = $.inArray(this.id, selectedVehicleTypes);
                if (btnIndex > -1) {
                    $(selector).fadeIn(450);
                    $(this).addClass("active");
                }
                else {
                    $(selector).hide();
                    $(this).removeClass("active");
                }
            }
        });
    }
}

这是正常的。但是，当我添加两个选项时，它会让人感到困惑。

<button class="btn" id="Benzin">Benzin</button>
<button class="btn" id="Diesel">Diesel</button>

<div id="parent">
   <div class="Manual Diesel">something</div>
   <div class="Automatic Diesel">something</div>
   ...
</div>

不工作。我怎么解决这个问题？感谢。

Answer 1

以下是几个用于类的jQuery选择器的示例。

$('.Automatic') 这将获得具有Automatic类的所有内容。

$('.Automatic, .Diesel') 这将获得具有自动或柴油的所有内容。

$('.Automatic.Diesel') 这将获得包含自动和柴油的所有内容。

$('.Automatic', '.Diesel') 这有点复杂，但它首先看起来都是Diesels然后说有任何子元素有自动并返回那些。

最后3个之间存在非常小的差异，这些差异使得世界变得不同。

使用带有一个或两个属性的jquery过滤div

1 个答案: