Question

I want to create a generic/scalable class that is able to accept none or multiple variables and process it. I want to learn how to check which field is present, number of field passed and do something with it. The ‘fruitstall’ class can accept 0 or multiple number of fruits variable.

HTML:

<div class="fruitstall(apple,orange)"></div>

Script:

$('.fruitstall').click(function(event){
   if (get first variable value and check if it is an apple) {
      //Show apple image 
   } elseif (get the next variable value and check if it is an orange) {
      //Show orange image
   }
   alert('Number of fruit chosen are ' + (count number of variable passed to class) + ' ; ' fruit(index0) + fruit(index1));
});

Pardon my fruit stall example, I thought it would be interesting to ask question in a more lively method. 🙂

Thank you very much.

Answer 1

Another way might be to use HTML5 data attributes:

<div class="fruitstall" data-fruits="apple,orange"></div>

Then your JS code could go:

var fruits = $(this).data('fruits').split(',');

which would get an array of all the fruits for the stall.