Question

I’ve coded a function that works but that is ugly. I’m pretty sure there’s a better way to do what I want and it probably turned out very ugly because I’m not really good in javascript 😀

I have some html elements that may have a class called view-in-box or view-in-box-640-480. If the class is just view-in-box, a dialog will appear with some defaults width and height, else it will show up with the width and height specified in the class name.

The html elements class can be something like: class='note comment ui-button view-in-box-300-200 footer star'.

What I’ve done until now is select all the elements that have view-in-box in it with:

$('body').delegate('[class*=view-in-box]','click', function(){

Then I take the whole class attribute and I loop on it to check whether I can find a view-in-box or not.
Here is the (simplified) code:

$('body').delegate('[class*=view-in-box]','click', function(){
    ...
    var class_array = $(this).attr('class').split(" ");
    for (var i = 0; i < class_array.length; i++) {
        if (class_array[i].search('view-in-box-') != -1) {
            box_text = class_array[i];
            break;
        }
    }

    if (box_text !== null) {
        box_array = box_text.split('-');
        ....
    }

    ....
    return false;
});

So I was wondering, is there a way to get back directly inside my function what matched the view-in-box predicate? Like for example view-in-box or view-in-box-233-455. Or do I really have to get the full class attribute and split it.

Hope I’m clear, javascript confuses me!
Thanks.

Answer 1

You should use a custom data-* attribute instead of classnames to store this data.

So instead of:

<div class="note comment ui-button view-in-box-300-200 footer star"></div>

Do yourself a favor and use:

<div class="note comment ui-button view-in-box footer star" data-size="300-200"></div>

Then you can just use $(el).data('size') to get the value using jQuery.