jQuery .load(jQuery(this).attr("id")) vs .load("theID") - how to translate?

I have a list (menu). When user clicks on link, I want to load content with ajax. The article to be loaded is to be determined based on the links id attribute.

example:

<ul class="ajaxMenu">
    <li><a id="services">Services</a>
    ...
</u>

the variables where I store the links to the article, are named the same as the links' id (i.e. Services and the url for the ajax call is stored on var services)

This works:

var services = "index.php?option=com_content&view=article&id=2&tmpl=component";

jQuery(".ajaxMenu > li > a ").click( 
        function(event) { 

            jQuery("#contentComponent").load(services);

        }

    );

Since this line of code jQuery(this).attr("id") gives me id, I was hoping this would work [it did not work]:

var services = "index.php?option=com_content&view=article&id=2&tmpl=component";
var designs = "index.php?option=com_content&view=article&id=3&tmpl=component";
var contact = "index.php?option=com_content&view=article&id=开发者_JS百科2&tmpl=component";

jQuery(".ajaxMenu > li > a ").click( 
        function(event) { 

            jQuery("#contentComponent").load(jQuery(this).attr("id"));

        }

    );

I could create an if, or a loop, iterate through each var, (i.e. if jQuery(this).attr("id") == "services"...load(services))

but I suspect I can achieve this with simple elegant code.

How could I translate jQuery(this).attr("id") into the .load() function without having to if, loop, etc., the value of jQuery(this).attr("id") against the named variables where I stored the urls to be loaded?

I would firstly put href attributes into your links as it seems like a really good place to put them.

<ul class="ajaxMenu">
    <li><a href="...">Services</a>
    ...
</ul>

And then in the click handler, do the load call using the href attribute. And don't forget to call preventDefault to stop the click from actually reloading the entire page.

jQuery(".ajaxMenu > li > a ").click(function(e) { 
    var href = jQuery(this).attr('href');
    jQuery("#contentComponent").load(href);
    e.preventDefault();
});

Create a map from IDs to URLs:

var pages = {
    services: "index.php?option=com_content&view=article&id=2&tmpl=component",
    designs: "index.php?option=com_content&view=article&id=3&tmpl=component",
    contact: "index.php?option=com_content&view=article&id=2&tmpl=component"
};

and then access that in your click handler:

jQuery(".ajaxMenu > li > a ").click( 
    function(event) { 
        jQuery("#contentComponent").load(pages[this.id]);
    }
);

NB: note also use of this.id which is the simpler (and somewhat faster) direct DOM method of reading the clicked element's ID instead of calling jQuery(this).attr("id").

In the first try (that works), you're loading a URL, in the second try, that doesn't, you're just loading an id. Your server is expecting a URL it seems.

Try this:

jQuery(".ajaxMenu > li > a ").click( 
        function(event) { 
                        var services = "index.php?option=com_content&view=article&id=2&tmpl=component";
        var designs = "index.php?option=com_content&view=article&id=3&tmpl=component";
        var contact = "index.php?option=com_content&view=article&id=2&tmpl=component";

            var id = jQuery(this).attr("id");
            if (id == 'services')
            {
                jQuery("#contentComponent").load(services);
            }
            else if (id == 'designs')
            {
                jQuery("#contentComponent").load(designs);
            }
            else if (id == 'contact')
            {
                jQuery("#contentComponent").load(contact);
            }
        }

    );

That won't work because that basically is trying to call jQuery("#contentComponent").load("Services") which is not what you want.

If those variables are global you could do this:

var url = window[jQuery(this).attr("id")];
jQuery("#contentComponent").load(url);

However, using a bunch of global variable is generally frowned upon. You may want to consider using jQuery Data and just store the URL directly on the link. Or use an object similar to a bunch of other answers that just popped up.