JS Pagination Problem

Make this work

by Luke Mason

HTML

<div class="pagination"></div>

CSS

.link {
    display: block;
    float: left;
    text-align: center;
    padding: 5px;
    border: 1px solid #ccc;
    margin: 5px 5px 0 0;
    font-family: sans-serif;
    cursor: pointer;
    text-decoration: none;
    color: #000;
}
.link:first-child {
    margin-left: 5px;
}
.link:hover {
    background-color: #ddd;
}

JavaScript

$(function () {
    var $pagination = $('.pagination'),
        alphabet = 'abcdefghijklmnopqrstuvwxyz'.toLocaleUpperCase(),
        debug = true;

    for (i = 0; i < 26; i++) {
        $link = $('<a />').addClass('link').html(alphabet[i]).click(function () {
            // Make this work without grabbing the letter's value from the DOM
            if (debug) {
                alert(alphabet[i]);
            } else {
                window.location.href = 'goto/' + alphabet[i]; // Should set href to something like goto/A
            }
        });
        $pagination.append($link);
    }
});