Jquery 从按钮 ID 创建选择器

Question

有4种类型的手动自动Disel和Benzin。

<button id="all">All</button>
<button id="Manual">Manual</button>
<button id="Automatic">Automatic</button>
<button id="Benzin">Benzin</button>
<button id="Diesel">Diesel</button>

如果手动或自动选择器将是其名称。但"自动"和"手动"不能同时选择。因此，如果一个人是活跃的，那么另一个人一定不是。本津和迪塞尔也是如此。

但是，如果选择了自动或手动和本津或柴油，则选择器将为 $（'。自动.本津'）等...

我怎样才能用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;
                console.log(selector)
                var btnIndex = $.inArray(this.id, selectedVehicleTypes);
                if (btnIndex > -1) {
                    $(selector).fadeIn(450);
                    $(this).addClass("active");
                }
                else {
                    $(selector).hide();
                    $(this).removeClass("active");
                }
            }
        });
    }
}

抱歉，我是jquery和javascript的新手。

Answer 1

你的代码真的很混乱，看起来你做了很多事情，并不是为了多少......你知道你的选择器可以使用变量吗，对吧？喜欢

<button id="all">All</button>
<button id="Manual">Manual</button>
<button id="Automatic">Automatic</button>
<button id="Benzin">Benzin</button>
<button id="Diesel">Diesel</button>
<div class="vehicle all Automatic">car 1 automatic</div>
<div class="vehicle all Automatic">car 2 automatic</div>
<div class="vehicle all Benzin">car 1 benzin</div>
$('button').click(function(){
    $('.vehicle.all').hide(); // hides all vehicles
    $('.vehicles .'+$(this).attr('id')).show(); // show just vehicles with the id
});

假设您将 .vehicles 和 .all（对于所有类型）作为车辆的类，并且每种车辆类型与按钮 ID 相同，因此：.自动。手册等

不要忘记将其中一些设置为display：block;首先使用css运行。

---

编辑：

根据您的评论，它应该是这样的：（https://jsfiddle.net/tfLf8Lgr/1/）

<button id="all">All</button>
<button id="Manual">Manual</button>
<button id="Automatic">Automatic</button>
<button id="Benzin">Benzin</button>
<button id="Diesel">Diesel</button>
<div class="Automatic Benzin">Automatic Benzin</div>
<div class="Automatic Diesel">Automatic Diesel</div>
<div class="Manual Diesel">Manual Diesel</div>
<div class="Manual Benzin">Manual Benzin</div>
var current_engine = '';
var current_cartype = '';
var engines = ['Automatic', 'Manual'];
var cartypes = ['Benzin', 'Diesel'];
$('button').click(function() {
  var selected = $(this).attr('id');
  if ($.inArray(selected, engines) !== -1 || selected == 'all')
    current_engine = selected;
  if ($.inArray(selected, cartypes) !== -1)
    current_cartype = selected;
  // hide based on engines, hide all then
  $.each(engines, function(k, v) {
    $('.' + v).hide();
  });
  // show everything based on engines, all then
  if (current_engine == 'all') {
    $.each(engines, function(k, v) {
      $('.' + v).show();
    });
  } else {
    $('.' + current_engine + '.' + current_cartype).show();
  }
});

在当前状态下，您需要将两种类型（发动机和汽车类型）都更改为工作