Using data in an associative array as the object fo an event handler

Afternoon All

I have some data -

    var searchwithin = [
{id:"clearwithin", type:"button"},
    {id:"search_radius", type:"select"},
    {id:"for_lease" ,type:"checkbox"},
{id:"for_sale", type:"checkbox"},
]; 

It is going to be showing and hiding informtion dependent on what is clicked (this is only a small fragment of the data.

I have already worked out how to check the type property, what I want开发者_StackOverflow社区 to know is the following:

If the type is button, how do I access the id value for that items and then generate a click function so that that uses the id as the name of the button to associate the function with.

Thanks in advance

Phil

First, fix a syntax error in your searchwithin table by removing the comma after the last item in the table. That will cause an error in IE6/IE7.

Then, you can use this code to look through your searchwithin array to find the id for the appropriate type and then set a click event handler for that id.

var searchwithin = [
    {id:"clearwithin", type:"button"},
    {id:"search_radius", type:"select"},
    {id:"for_lease" ,type:"checkbox"},
    {id:"for_sale", type:"checkbox"}
]; 

function findIdByType(target) {
    for (var i = 0; i < searchwithin.length; i++) {
        if (searchwithin[i].type === target) {
            return(searchwithin[i].id);
        }
    }
}

var id = findIdByType("button");
if (id) {
    $("#" + id).click(function() {
        // do whatever you want to do on the click function here
    }
});

I notice that your table has two entries for type:checkbox. The above code suggestion will return and operate on the first entry only. If you want to set up click handlers for both those IDs, then either the code or table would have to be modified. If this is all the table is used for, it could be changed to be a selector (which can contain more than one id) like this:

var searchwithin = [
    {id:"#clearwithin", type:"button"},
    {id:"#search_radius", type:"select"},
    {id:"#for_lease, #for_sale", type:"checkbox"}
]; 

function findSelectorByType(target) {
    for (var i = 0; i < searchwithin.length; i++) {
        if (searchwithin[i].type === target) {
            return(searchwithin[i].id);
        }
    }
}

var selector = findSelectorByType("button");
if (selector) {
    $(selector).click(function() {
        // do whatever you want to do on the click function here
    }
});

Concatenate '#' and the id property and use the resulting string as a selector.

$.each($.grep(searchwithin, function(i) { return i.type=='button'; }), 
    function () { 
        var item = this;
        $('#'+this.id).bind('click', function(e) {
            alert('clicked: ' + item.id +' '+ item.type);
        });
    });

Consider using selectors to find elements rather than ID maps.

$('input[type="button"].search').bind('click', onSearch);