How to add a conditional statement (Using an element ID as condition) to Javascript?

Again, I have another basic question for the wonderful users here at StackOverflow. I am new to client-side programming and although this is a fairly basic example in other languages I know, I am unsure of the proper syntax of doing so here (if it has been implemented).

Here is my current code. The page, for reference, can be found at http://paysonfirstassembly.com/. However, I have not uploaded the most recent version and the function below does not exist on the production server (yet).

$(function 开发者_开发问答() {
    var $subnavContainer = $(".subwrapperBlue");
    $(".navElements").click(function () {
        $subnavContainer.show("slow");
    });

This is my most recently updated code. The div will not reappear after clicking, however, the alert box DOES pop up.

var $subnavContainer = $(".subwrapperBlue");
$(function () {
    $(".navElements").click(function () {
        switch ($(this).index()) {
            case 0:
                $subnavContainer.html("some html");
                break;
            case 1:
                $subnavContainer.html("some more html");
                break;
            case 2:
                $subnavContainer.html("some other html");
                break;
            case 3:
                $subnavContainer.html("the final html");
                break;
        }
        $subnavContainer.show("slow");
        alert("this works");
    });

You can check the index of the element. It starts with 0 as the first, 1 as the second, etc.:

if ($(this).index() == 0) {
  $subnavContainer.html("some html");
}

$(this) refers to the element which was clicked.

Instead of doing a long if {} else if {} ... chain, why not use a switch? It's much neater IMO as you can inline the break;:

switch ($(this).index()) {
  case 0:
    $subnavContainer.html("some html");
    break;

  case 1:
    $subnavContainer.html("some more html");
    break;

  ...
}

$(function () {
    var $subnavContainer = $(".subwrapperBlue");
    $(".navElements").click(function (e) {
        if (e.target.id == 'firstElement')
        {
            $subnavContainer.html("some html");
        }
        else if (e.target.id == 'secondElement')
        {
            $subnavContainer.html("some other html");
        }
        $subnavContainer.show("slow");
    });
});

If you HTML looks like this

<div id='firstElement' nave' class='navElements">Elem 1</div>
<div id='secondElement' class='navElements">Elem 2</div>
<div id='thirdElement' class='navElements">Elem 3</div>
<div id='fourthElement' class='navElements">Elem 4</div>

You can simply do this

$(".navElements").click(function () {
   var $id = $(this).attr('id');
   if ($id == 'firstElement') {
     //code
   } elseif ($id == 'secondElement') {
     //code
   }
   //more code
});

$(function () {
    var $subnavContainer = $(".subwrapperBlue");
    $(".navElements").click(function (event) { <-- CHANGED
        var el = event.target;
        if (el.id == #firstElement)
        {
            $subnavContainer.html("some html");
        }
        else if (el.id == #secondElement)
        {
            $subnavContainer.html("some other html");
        }
        $subnavContainer.show("slow");
    });

That's so you can get access to the event.target

Alternately, use $(this) to test the element that you clicked on. It really just kind of depends on what you're starting with.

$(function () {
    var $subnavContainer = $(".subwrapperBlue");
    $(".navElements").click(function () {
        if ($(this).attr('id') == #firstElement)
        {
            $subnavContainer.html("some html");
        }
        else if ($(this).attr('id') == #secondElement)
        {
            $subnavContainer.html("some other html");
        }
        $subnavContainer.show("slow");
    });

$(function () {
    var $subnavContainer = $(".subwrapperBlue");
    $(".navElements").click(function () { 
        if ($(this).index() == 0)
        {
            $subnavContainer.html("some html");
        }
        else if ($(this).index() == 1) // zero based indexing
        {
            $subnavContainer.html("some other html");
        }
        $subnavContainer.show("slow");
    });

There are alreayd a few good answers but another way would be having two methods

$(function () {
    var $subnavContainer = $(".subwrapperBlue");
    $(".navElements").first().click(function () {
        $subnavContainer.html("some html");

        //This element is hidden onLoad using the $(document).ready object.
        $subnavContainer.show("slow");
    });

    $(".navElements").not(":first").click(function () {
        $subnavContainer.html("some other html");

        //This element is hidden onLoad using the $(document).ready object.
        $subnavContainer.show("slow");
    });
});