Question

I’m currently work on a site where definitions switch out on the homepage when users click on a word from a definition list. So far, I’m having issues figuring out the best approach. The code below is where I’m at now. While it doesn’t work, you can see the structure and what I’m trying to accomplish. Here’s the URL of the test site:
http://redone.org/_dev/ski/index.html

    <!-- Sub Nav -->
    <div id="menu-sub-menu" class="grid_3">
        <ul>
            <li id="d0" class="current_page_item"><a href="#">Sub Menu 1</a></li>
            <li id="d1" ><a href="#">Sub Menu 2</a></li>
            <li id="d2"><a href="#">Sub Menu 3</a></li>
            <li id="d3"><a href="#">Sub Menu 4</a></li>
            <li id="d4"><a href="#">Sub Menu 5</a></li>
            <li id="d5"><a href="#">Sub Menu 6</a></li>
        </ul>
        <script type="text/javascript">
        var definitions = ["definition 0 - Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci.",
                           "definition 1 - Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.",
                           "definition 2 - Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim.",
                           "definition 3 - Suspendisse dictum feugiat nisl ut dapibus. Etiam at risus et justo dignissim congue. Donec congue lacinia dui.",
                           "definition 4 - Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.",
                           "definition 5 - Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id."];
        var examples = ["Example 0 - Ut in nulla enim.",
                        "Example 1 - Suspendisse dictum feugiat nisl ut dapibus.",
                        "Example 2 - Mauris iaculis porttitor posuere.",
                        "Example 3 - Vivamus hendrerit arcu sed erat molestie vehicula. ",
                        "Example 4 - Sed auctor neque eu tellus.",
                        "Example 5 - Etiam at risus et justo dignissim congue."];
        for (i=0; i<6; i++){
            $("#d" + i).idx = i
            $("#d" + i).click(function(){
                $("#defined").html(definitions[this.idx]);
                $("#example").html(examples[this.idx]);
            });
        }
    </script>
    </div>
    <!-- Content -->
    <div id="definition" class="grid_13">
        <p id="defined" class="defined padthis">Mauris iaculis porttitor posuere. <a href="#">Praesent id metus massa</a>, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. </p>
        <p id="example">Proin quis tortor orci. Etiam at risus et <a href="#">justo dignissim congue.</a></p>
   </div>

Any help would be greatly appreciated.

Answer 1

You can shorten that significantly using Attribute Starts With and .index():

$("#menu-sub-menu > ul > li[id^=d]").click(function() {
    $("#defined").html(definitions[$(this).index()]);
    $("#example").html(examples[$(this).index()]);
});