CODEWITHSUNDEEP
javascriptjquery
fightstarr20
fightstarr20

Reputation: 12598

jQuery change opacity of non-matching items

I have the following jquery which has been created with the help of a SO member in a previous question...

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();
});

http://jsfiddle.net/fprL03e5/

I am now trying to modify the code so that when an option is selected, all of the non-matching terms have reduced opacity.

When the page is initially loaded all items should have full opacity until one of the items is selected.

I have tried adding an extra class but can't work out how to have it removed when items are de-selected.

Upvotes: 0

Views: 32

Answers (1)

Devin H.
Devin H.

Reputation: 1105

Is this what you're looking to do?

http://jsfiddle.net/fprL03e5/3/

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

  $('.test').removeClass('main');
  $('.test').css('opacity', '.5');

  if (classes.length > 1) {    
    $(classes).addClass('main').css('opacity', '1');
  } else {
    $('.test').css('opacity', '1');   
  }
}

Upvotes: 1

Related Questions