what can i do to get this piece of code working as i want

Question

i've made an application where a user is presented with bunch of images, where he click on an image and depending upon that image he's presented another, for example

male->body_type_a->below_18->recommended_a
male->body_type_b->below_18->recommended_b
male->body_type_c->below_18->recommended_c
male->body_type_a->above_18->recommended_a
male->body_type_b->above_18->recommended_b
male->body_type_c->above_18->recommended_c
male->body_type_a->above_35->recommended_a
male->body_type_b->above_35->recommended_b
male->body_type_c->above_35->recommended_c

similar for women, now i'm pasting this piece of code, how to get to know which image was clicked by the user so that after last step i can nagivate url bases on what he clicked, i'm unable to get what image user has clicked, i've pasted the code in jsfiddle click here to view sorry code was way larger

Answer 1

As the selection types are similar you can refractor the three functions into one, and determine the route taken by the image clicked.

var IMG_MALE = "http://placehold.it/50x50/343434&text=Male";
var IMG_FEMALE = "http://placehold.it/50x50/dedede&text=Female";

var IMG_ECTO = "http://placehold.it/50x50/343434&text=Ecto";
var IMG_ENDO = "http://placehold.it/50x50/343434&text=Endo";
var IMG_MESO = "http://placehold.it/50x50/343434&text=Meso";

var IMG_AGE_18 = "http://placehold.it/50x50/343434&text=-18";
var IMG_AGE_1835 = "http://placehold.it/50x50/343434&text=18-35";
var IMG_AGE_35 = "http://placehold.it/50x50/343434&text=35+";

var IMG_PROD_BULK = "http://placehold.it/50x50/343434&text=Bulk";
var IMG_PROD_FIT = "http://placehold.it/50x50/343434&text=Fit";
var IMG_PROD_MUSCLE = "http://placehold.it/50x50/343434&text=Muscle";

$(document).ready(function () {
    var state = 0;
    var link = new Array(4);
    var male = "";

    // using images that have id starting with '#img' can narrow if required
    $("img").click(function (e) {
        $("img").removeClass('animated fadeIn');

        var src = $(e.target).attr("src");

        switch (src) {
            case IMG_MALE:
                link[0] = src;
                $('#runtime-text').text("SELECT YOUR BODY TYPE :");
                $('#img1').attr("src", IMG_ECTO);
                $('#img2').attr("src", IMG_ENDO);
                $('#img3').attr("src", IMG_MESO);
                break;

            case IMG_ECTO:
            case IMG_ENDO:
            case IMG_MESO:
                link[1] = src;
                $('#runtime-text').text("SELECT YOUR AGE :");
                $('#img1').attr("src", IMG_AGE_18);
                $('#img2').attr("src", IMG_AGE_1835);
                $('#img3').attr("src", IMG_AGE_35);
                break;

            case IMG_AGE_18:
            case IMG_AGE_1835:
            case IMG_AGE_35:
                link[2] = src;
                $('#runtime-text').text("SELECT PRODUCT FOR :");
                $('#img1').attr("src", IMG_PROD_BULK);
                $('#img2').attr("src", IMG_PROD_FIT);
                $('#img3').attr("src", IMG_PROD_MUSCLE);
                break;

            case IMG_PROD_BULK:
            case IMG_PROD_FIT:
            case IMG_PROD_MUSCLE:
                link[3] = src;
                alert("User selected " + link[0] + " -> " + link[1] + " -> " + link[2] + " -> " + link[3]);
                $('#btn1').click();
                break;

            default:
                break;
        }

        $("img").addClass('animated fadeIn');
    })

    $('#btn1').click(function () {
        console.log("btn");
        $('#img1').attr("src", IMG_MALE);
        $('#img2').attr("src", IMG_FEMALE);
        $('#img3').attr("src", "");

        $("img").addClass('animated fadeIn');
    })
});

The code above uses a general img selector, you can switch to more specific by using the correct classes etc. The result is currently alerted to screen, but it can be used to determine the path the user has taken. The jsFiddle at - http://jsfiddle.net/sRD5r/