javascript - jQuery change opacity of non-matching items -
i have following jquery has been created of member in 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; (var = 0; < 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(); });
i trying modify code when option selected, of non-matching terms have reduced opacity.
when page loaded items should have full opacity until 1 of items selected.
i have tried adding class can't work out how have removed when items de-selected.
is you're looking 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'); } }
Comments
Post a Comment