Question

I’m doing an hobby HTML project with lots of PHP, Jquery into it.
I finally got my sorting working:
http://www.spisbilligt.nu/.

Now i need the picture to change when I have sorted the list and click one of the remaining buttons.

I got my code here:
http://jsfiddle.net/6qNAt/1/

 var itemInfo = { // Initialise the item information
  item1: ['item1.jpg', 'Description of item 1...'],
  item2: ['item2.jpg', 'Description of item 2...'],
  ...
  };

(function() {
  ('#items a').click(function() { // When an item is selected
        var id = $(this).attr('href').replace(/#/, ''); // Retrieve its ID
        ('#info img').attr('src', itemInfo[id][0]); // Set the image
        ('#info p').text(itemInfo[id][1]); // And text
        return false; // Prevent default behaviour
     });

});

To see what i am meaning and get hungry look here and see the cupcakes:
http://www.georgetowncupcake.com/menu.html

Answer 1

I would encourage you to move your data to data-* attributes on the list-items themselves:

<!-- Storing data on the element is cleaner, and more manageable -->
<ul id="items">
    <li data-src="pie_1.png" data-desc="Desc Item 1">Item 1</li>
    <li data-src="pie_2.png" data-desc="Desc Item 2">Item 2</li>
</ul>

Then use event-delegation to listen for any click:

// Event Delegation is more efficient than many handlers
$("#items").on("click", "li", function () {

});

And lastly, set the data attribute values to the image and text within the info area:

$("#items").on("click", "li", function () {
    // Get the data from the clicked list item
    var data = $(this).data();
    // Use the data for our info elements
    $("#info")
        .find("img").attr("src", data.src).end()
        .find("p").html(data.desc);
});

Fiddle: http://jsfiddle.net/6qNAt/3/