我能做些什么来让这段代码像我想要的那样工作

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

本文关键字：我想要 工作 代码 做些什么 段代码      更新时间：2023-09-26

我做了一个应用程序，其中用户呈现了一堆图像，他点击一个图像，并根据该图像，他呈现了另一个，例如

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

类似于女性，现在我粘贴这段代码，如何知道用户点击了哪个图像，以便在最后一步之后，我可以根据他点击的内容来导航url，我无法获得用户点击的图像，我将代码粘贴在jsfiddle中点击这里查看抱歉，代码太大了

由于选择类型相似，您可以将这三个功能折射为一个，并确定所单击图像的路径。

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');
    })
});

上面的代码使用了一个通用的img选择器，你可以通过使用正确的类等来切换到更具体的。结果当前会显示在屏幕上，但它可以用来确定用户所采取的路径。jsFiddle在- http://jsfiddle.net/sRD5r/

相关文章：