![](/img/trans.png)
[英]How can I make my conditionals working in this JavaScript piece of code?
[英]what can i do to get this piece of code working as i want
我制作了一個應用程序,其中向用戶顯示一堆圖像,他單擊圖像,然后根據該圖像顯示另一個圖像。
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
與女性相似,現在我粘貼這段代碼,如何了解用戶單擊了哪個圖像,以便在上一步之后,我無法根據他單擊的內容來確定網址,我無法獲得用戶的圖像單擊,我已將代碼粘貼到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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.