Looking to preserve the "ALL" selection in a JavaScript-CSS filter?

Question

Looking to preserve the "ALL" selection in a JavaScript-CSS filter?

On the front page, there are approximately 16 posts displayed along with a filter featuring 4 drop-down menus showcasing post categories. I have assigned category names as classes to each post div and am currently using javascript to hide them.

The code snippet below is utilized for filtering posts:

$('#filter select').change(function () {
var upper = $('#upper').val(); //these are IDs of select.
var sole = $('#sole').val();
var toe = $('#toe').val();
var midsole = $('#midsole').val();



var classes = '.' + [upper, sole, toe, midsole].join('.');
$('.box').hide().filter(classes,toeall).show(); 
});

.box represents the class of the post container which functions flawlessly.

The initial option in every dropdown menu is labeled "ALL," which I aim to make functional.

For instance, selecting ALL in the "TOE" dropdown menu should retain the current results while also displaying posts that belong to any TOE category.

I attempted to identify all values from the TOE dropdown menu using the following code:

var toeall = new Array(); 
$('#toe option').each(function() {
   toeall.push('.'+$(this).val());
});

if(toe=="all")
{
    $('.box').hide().filter(classes&&toeall).show();
}

While aware of the inaccuracies in the above code, could someone provide guidance on how to correct it?

UPDATE: http://jsfiddle.net/kd3ybnnx/1/ <- Demo after answer from madalin ivascu

javascript jquery html css

Answer 1

Answer №1

Give this a shot:

    $('#filter select').change(function () {
var upper = $('#upper').val(); //these are IDs of select.
var sole = $('#sole').val();
var toe = $('#toe').val();
var midsole = $('#midsole').val(),

array1 = [upper, sole, toe, midsole];
        var ar =[];
            $.each(array1,function(index,val){
              if (val != 'all') {//note the value of all option has to be all
                  ar.push(val);
               }

            });
        if(ar.length == 0) {$('.box').show();} else {
           var classes = '.' + ar.join('.');
            $('.box').hide().filter(classes).show(); 
        }       

});

Check out the working example on jsfiddle: http://jsfiddle.net/kd3ybnnx/4/

Answer 2

Give this a shot:

    $('#filter select').change(function () {
var upper = $('#upper').val(); //these are IDs of select.
var sole = $('#sole').val();
var toe = $('#toe').val();
var midsole = $('#midsole').val(),

array1 = [upper, sole, toe, midsole];
        var ar =[];
            $.each(array1,function(index,val){
              if (val != 'all') {//note the value of all option has to be all
                  ar.push(val);
               }

            });
        if(ar.length == 0) {$('.box').show();} else {
           var classes = '.' + ar.join('.');
            $('.box').hide().filter(classes).show(); 
        }       

});

Check out the working example on jsfiddle: http://jsfiddle.net/kd3ybnnx/4/

Answer 3

Answer №2

One way to approach this is by trying the following code snippet:

$('#filter select').change(function () {
    var upper = $('#upper').val();
    var sole = $('#sole').val();
    var toe = $('#toe').val();
    var midsole = $('#midsole').val(),
    array = [upper, sole, toe, midsole];
    var counter = 0;
    $.each(array,function(index,val){
         if (val == 'all') {
             counter++;
         }
    })
    if(counter == array.length) {
        $('.box').show();
    } else {
        var classes = '.' + array.join('.');
        $('.box').hide().filter(classes).show(); 
    }
});

In this script, it checks for the presence of all selects with the value all. If they do, all boxes are shown. Otherwise, filtering is applied due to at least one filter being selected.

Answer 4

One way to approach this is by trying the following code snippet:

$('#filter select').change(function () {
    var upper = $('#upper').val();
    var sole = $('#sole').val();
    var toe = $('#toe').val();
    var midsole = $('#midsole').val(),
    array = [upper, sole, toe, midsole];
    var counter = 0;
    $.each(array,function(index,val){
         if (val == 'all') {
             counter++;
         }
    })
    if(counter == array.length) {
        $('.box').show();
    } else {
        var classes = '.' + array.join('.');
        $('.box').hide().filter(classes).show(); 
    }
});

In this script, it checks for the presence of all selects with the value all. If they do, all boxes are shown. Otherwise, filtering is applied due to at least one filter being selected.

Answer 5

Answer №3

To exclude values that are not 'all', you can iterate through all elements and remove the unnecessary ones from the array. One common approach is to use the array.splice(index, 1) function.

However, there is a drawback with the splice method as it alters the indices in the array. For instance, if there are four elements and the third one is removed, the fourth element becomes the third. This issue can be addressed by:

Storing the required elements in a separate new array instead of deleting them from the original array
Utilizing an associative array where index values remain constant
Implementing an each loop with a decreasing variable for indexing purposes

UPDATE:

Using native Javascript filter function to easily eliminate unwanted items

~~I have opted for the fourth technique mentioned above because it predominantly relies on vanilla Javascript. You can refer to the annotated code snippet and the preferred solution below:~~ I have selected the fourth method since it primarily involves vanilla Javascript. See the annotated code and the adopted alternative:

http://codepen.io/xaddict/pen/PqqYBa?editors=001

This presents the simplest solution among the previously discussed options and maintains readability.

It leverages the filter feature to effortlessly eliminate instances of 'all' values.

function isNotAll(value) {
  return value != 'all';
}
totals.filter(isNotAll);

Complete implementation:

$('#filter select').change(function() {
  var upper = $('#upper').val(),
      sole = $('#sole').val(),
      toe = $('#toe').val(),
      midsole = $('#midsole').val(),
      totals = [upper, sole, toe, midsole];
  function isNotAll(value) {
    return value != 'all';
  }
  var filtered = totals.filter(isNotAll);
  $(".box").show();
  if (filtered.length) {
    $(".box").hide().filter('.'+filtered.join('.')).show();
  }
});

Answer 6

To exclude values that are not 'all', you can iterate through all elements and remove the unnecessary ones from the array. One common approach is to use the array.splice(index, 1) function.

However, there is a drawback with the splice method as it alters the indices in the array. For instance, if there are four elements and the third one is removed, the fourth element becomes the third. This issue can be addressed by:

Storing the required elements in a separate new array instead of deleting them from the original array
Utilizing an associative array where index values remain constant
Implementing an each loop with a decreasing variable for indexing purposes

UPDATE:

Using native Javascript filter function to easily eliminate unwanted items

~~I have opted for the fourth technique mentioned above because it predominantly relies on vanilla Javascript. You can refer to the annotated code snippet and the preferred solution below:~~ I have selected the fourth method since it primarily involves vanilla Javascript. See the annotated code and the adopted alternative:

http://codepen.io/xaddict/pen/PqqYBa?editors=001

This presents the simplest solution among the previously discussed options and maintains readability.

It leverages the filter feature to effortlessly eliminate instances of 'all' values.

function isNotAll(value) {
  return value != 'all';
}
totals.filter(isNotAll);

Complete implementation:

$('#filter select').change(function() {
  var upper = $('#upper').val(),
      sole = $('#sole').val(),
      toe = $('#toe').val(),
      midsole = $('#midsole').val(),
      totals = [upper, sole, toe, midsole];
  function isNotAll(value) {
    return value != 'all';
  }
  var filtered = totals.filter(isNotAll);
  $(".box").show();
  if (filtered.length) {
    $(".box").hide().filter('.'+filtered.join('.')).show();
  }
});

Looking to preserve the "ALL" selection in a JavaScript-CSS filter?

Answer №1

Answer №2

Answer №3

Similar questions

Prevent additional clicks on the image

What could be causing the Firebase email verification to result in a 400 error?

What methods can be used to accurately display the data type with TypeOf()?

Pressing a button to input a decimal in a calculator

Choose the "toolbar-title" located within the shadow root of ion-title using CSS

Enhance your webpage with our jQuery plugin that allows you to easily make Ajax

Tips for implementing and utilizing an optional parameter within Vue Router

The angularJS ternary expression is not considered valid

Ways to achieve an arched shadow effect for an image using React and Tailwind CSS?

style of placing a space between objects

Tips on aligning carousel images and captions next to each other

What is the best way to apply index-based filtering in Angular JS?

Unexpected empty page upon attempting to load JSON data from a text file

Tips for extracting text from nested elements

Preventing the submission of form post values by using jQuery remote validation

performing asynchronous operations with async functions within the array.map() method in JavaScript

Exploring the Haversine Formula and Geolocation Integration in AngularJS

Vuejs is throwing an error claiming that a property is undefined, even though the

New development: In Express.js, the req.body appears to be empty and req.body.name is showing up as undefined

Is the renderer.setSize in Three.js calculated as a percentage of the screen size?