Question

我有这种情况：在this页上，有一些纹身风格的艺术家。我的想法是为每个艺术家分配一个类，例如，使用样式名称，使用各种样式的名称创建一个下拉菜单，并确保在通过JQuery单击各种项目时，分配的类被另一种修改后的样式“突出显示”具有该特定样式（例如，图像周围带有红色边框）的所有艺术家。

您能帮我造成类似的情况吗？你能给我一些想法吗？我已经疯了一周了！

多谢指教！

Answer 1

用足够的类别标记照片后，可以将回调绑定到下拉列表更改事件以重置所有先前的突出显示，然后根据特定的类别将突出显示类别提供给所需的子选择。

我想举一个例子会更清楚：

// Dynamically build select options
let tatoos = [];

$('.tatoo').each(function(i, t) {
  let tatoo = t.className.replace('tatoo ', '');
  
  if(tatoos.indexOf(tatoo) < 0) tatoos.push(tatoo);
});

// Add options to the dropdown list
tatoos.sort().forEach(function(tatoo) {
  $('#tatoos').append(`<option value="${tatoo}">${tatoo}</option>`);
});

// Bind change event to monitor dropdown selection
$('#tatoos').change(function(ev) {
  let c = $(this).val();
  
  $('.tatoo').removeClass('highlight');
  if(c) {
    $('.' + c).addClass('highlight');
  }
});

.tatoo {
  display: inline-block;
  margin: 10px;
  width: 50px;
  height: 50px;
  background-color: #999
}

.tatoo.highlight {
  border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="tatoos"><option value=""></option></select>
<div>
<div class="tatoo tatoo1">1</div>
<div class="tatoo tatoo1">1</div>
<div class="tatoo tatoo2">2</div>
<div class="tatoo tatoo1">1</div>
<div class="tatoo tatoo3">3</div>
<div class="tatoo tatoo2">2</div>
<div class="tatoo tatoo3">3</div>
</div>

下拉菜单通过JQuery动态切换类

1 个答案: