0

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.

Improve this question
3
  • 1
    Classes do not work like that, they are just identifiers, not variables. You can add multiple classes though .fruitstall .apple .orange. Though classes do not have defined order necessarily, so if first and second order matter, as opposed to two or more entries, then that is not sound. Commented May 11, 2011 at 15:00
  • Also, usually, it is not a good idea to simplify your example, as you may well end up with inappropriate solutions. (or leave in other text, .colourpicker)? Commented May 11, 2011 at 15:03
  • @Orbling , Ops, I type the wrong class to check on click, I edited it. Supposely should be .fruitstall. Typo error. Commented May 11, 2011 at 15:11

3 Answers 3

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

+1 this is in fact a perfect example for the usage of the data attribute.
HTML5 is not cross platform compatible. A mass majority of the world browser is the the aged old snail processing IE6. So data attributes might not be a suitable solution.
@mmk: While that is true about HTML5 in general, if you are just using an extra element attribute then you will be just fine -- all browsers will accept that. Take a look at caniuse.com/#feat=dataset -- "All browsers can already use data-* attributes and access them using getAttribute."
@mmk: IE6 is far from a majority, single figures usage. But still, HTML5 data attributes will cause hassles in more areas than that.
After reading getAttribute compatibility list, I think I will finalize and use that as a solution to my project. Thank you, your answer will be selected as an answer! Cheers.
3

You can have multiple classes assigned:

<div class="apple orange" id="divId"></div>

And then do a split on them like so:

var classList =$('#divId').attr('class').split(/\s+/);
$.each( classList, function(index, item){
    if (item=='someClass') {
       //do something
    }
});

Source: Get class list for element with jQuery

Improve this answer

4 Comments

Is there no other way? I have seen some Jquery validation that has classes named class="validate[required,custom[quantity],minCheckbox[1]]". How does that works?
@mmk That would require custom parsing of the className, and the code would be VERY complicated / cumbersome.
@_onteria : But if that is the only way then Groovek's answer using AJAX JSON might work.
@mmk 1) It uses eval and should use a proper JSON parser 2) That's a bit much just to get the class name's tokenized versus using split and working on the individual elements
1

I don't know if that could work, but if you prepare you class String as a JSON one, you could use eval() to get an object from which you could enumerate arguments

 function prepareAsJSON(className){
        var JSON = "{list:function" + className + "{return arguments}}"
        return JSON
 }

 var className = $("div").attr('class');
 var st = prepareAsJSON(className);
 var obj = eval(st)
 obj.list() //should return arguments as an array

I would never do that in production code, but that's pretty funny

Cheers

Grooveek

Improve this answer

2 Comments

Interesting idea you have there but that is kinda weird. But nevertheless good attempt! :)
@mmk : I know it's weird. What's more weird is writing function in class names, no ? So weird answer to weird question... :-D Funny to think about, though

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.