jQuery突出显示与下拉菜单中的值匹配的div

debugcn 发表于 Dev

Fightstarr20

我有一个很棒的jsfiddle，当您从顶部列表中选择一种颜色时，它会突出显示包含相同类的所有div。

.$links = $('.link');
$links.click(function(e) {
    //Get our variables, simply $(this) and the colour
    var $this = $(this),
        color = $this.data('col');

    //Toggle the active class on this link
    $this.toggleClass('active');

    //Remove .main on all .test's
    $(".test").removeClass("main");

    //Map the active link's data-col with a dot attributes to an array
    //Join it up to make a selector
    var selector = $links.filter('.active').map(function(){
        return "."+$(this).data('col');
    }).get().join('');

    //Add the class back on to matches
    $(selector).addClass('main');

    //Finally, prevent the default action
    e.preventDefault();
});

http://jsfiddle.net/q0f7w8zj/7/

我现在想将下拉菜单添加到方程式中，但无法计算出如何将其集成。有人看到我使用下拉菜单的示例吗？

冈

经过一番澄清，我有你的答案。

为了实现这一点，您将需要变得更加复杂并维护一系列过滤器。更改select或单击颜色会调整我们的滤镜阵列，我们会做出相应的响应。

DEMO

var filters = [];

function filterList () {
  var classes = '.' +  filters.join('.');

  $('.test').removeClass('main');

  if (classes.length > 1) {
    $(classes).addClass('main');
  }
}

function removeFilter(ele) {
  var len = filters.length,
      idx;

  for (var i = 0; i < len; i++) {
    if (filters[i] === ele) {
      idx = i;
      break;
    }
  }

  filters.splice(idx, 1);
}

function addFilter(ele) {
  if (ele) {
    filters.push(ele);
  }
}

var selectIt = (function () {
  var lastSelect;

  return (function (ele) {
    if (lastSelect) {
      removeFilter(lastSelect);
    }

    addFilter(ele);
    lastSelect = ele;
  });
}());


$('.selector').on('change', function (e) {
  var val = $(this).val();

  selectIt(val);
  filterList();
});

$('.mybuttons a').on('click', function (e) {
  e.preventDefault();

  var el = $(this),
      col = el.data('col');

  if (el.hasClass('active')) {
    removeFilter(col);
  } else {
    addFilter(col);
  }

  el.toggleClass('active');
  filterList();
});

var filters = [];

function filterList () {
  var classes = '.' +  filters.join('.');
  
  $('.test').removeClass('main');
  
  if (classes.length > 1) {
    $(classes).addClass('main');
  }
}

function removeFilter(ele) {
  var len = filters.length,
      idx;

  for (var i = 0; i < len; i++) {
    if (filters[i] === ele) {
      idx = i;
      break;
    }
  }

  filters.splice(idx, 1);
}

function addFilter(ele) {
  if (ele) {
    filters.push(ele);
  }
}

var selectIt = (function () {
  var lastSelect;
  
  return (function (ele) {
    if (lastSelect) {
      removeFilter(lastSelect);
    }
    
    addFilter(ele);
    lastSelect = ele;
  });
}());


$('.selector').on('change', function (e) {
  var val = $(this).val();
  
  selectIt(val);
  filterList();
});

$('.mybuttons a').on('click', function (e) {
  e.preventDefault();

  var el = $(this),
      col = el.data('col');

  if (el.hasClass('active')) {
    removeFilter(col);
  } else {
    addFilter(col);
  }

  el.toggleClass('active');
  filterList();
});

.test{height:30px;width:250px;background:lightgrey;margin-bottom:10px;border:black 1px solid;text-align:center}

.link{opacity:.5;}
.main{background:blue;color:white;}
.active{opacity:1;}

.link.red{background:red;color:white;width:50px;height:30px;text-decoration:none;}
.link.green{background:green;green:white;width:50px;height:30px;text-decoration:none;}
.link.yellow{background:yellow;color:black;width:50px;height:30px;text-decoration:none;}
.link.blue{background:blue;color:white;width:50px;height:30px;text-decoration:none;}
.link.orange{background:orange;color:white;width:50px;height:30px;text-decoration:none;}

<select class="selector">
  <option value="">--</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<ul class="mybuttons">
  <li><a href="#" data-col="red" class="link red">Red</a></li>
  <li><a href="#" data-col="green" class="link green">Green</a></li>
  <li><a href="#" data-col="yellow" class="link yellow">Yellow</a></li>
  <li><a href="#" data-col="blue" class="link blue">Blue</a></li>
  <li><a href="#" data-col="orange" class="link orange">Orange</a></li>
</ul>

<div class="test red blue volvo">Red - Blue - Volvo</div>
<div class="test blue">Blue</div>
<div class="test yellow">Yellow</div>
<div class="test blue yellow">Blue - Yellow</div>
<div class="test orange mercedes">Orange - Merceds</div>
<div class="test red">Red</div>
<div class="test yellow volvo">Yellow - Volvo</div>
<div class="test green blue saab">Green - Blue - Saab</div>
<div class="test orange audi saab">Orange - Audi - Saab</div>
<div class="test yellow audi">Yellow - Audi</div>
<div class="test green mercedes">Green - Mercedes</div>
<div class="test blue">Blue</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。