Question

有4种类型的Manual Automatic Disel和Benzin。

EDIT

如果手动或自动选择的选择器是其名称。但是自动和手动无法一起选择。因此，如果一个人活跃，其他人必须不是。 Benzin和Diesel也是如此。

但如果选择自动或手动和Benzin或Diesel，选择器将是$（'。Automatic.Benzin'）或等...

我如何用jquery做到这一点？我尝试过但没有成功。

这是我的尝试。

TRAPSIG

抱歉，我是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相同，所以：.Automatic，.Manual等。

不要忘记将其中一些设置为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();
  }
});

在当前状态下，您需要将BOTH类型（引擎和购物车类型）更改为

Jquery从按钮ID创建选择器

1 个答案: