gpt4 book ai didi

javascript - 在 Javascript 中递归调用函数?

转载 作者:行者123 更新时间:2023-11-28 00:24:58 25 4
gpt4 key购买 nike

我正在尝试使用 HTML 和 jQuery 创建一小段交互式功能。为此,我一直使用 jQuery 来更新和更改 attr() 和 .text()。我想要采用这种方法,因为我想要一种更无缝的感觉,无需页面加载,因为它不是图像密集型的。

我创建了具有基本标题的“场景”。我将这些标题放入一个数组中,然后将它们打乱(我希望它们的外观是随机的而不是重复的)。

现在,只有当用户使用单选按钮进行选择时,场景才会发生变化(我可能会更改此设置,因为当前单选按钮在内容更改时不会清除)。因此,单击这些选择的 ID,在 jQuery 中我有“random_scene”函数,并尝试再次调用相同的函数;基本上试图让它递归地遍历数组,直到使用所有元素。

我下面的内容,有点工作,但它有问题,有时会跳过没有的选择,或者在到达最后一个元素之前立即向下遍历整个数组。

我需要帮助来确定我尝试做的事情是否可行,以及是否有更好的方法来完成我正在做的事情。我将包含我的整个 js 文件,这样您就可以看到发生了什么。

$('#menu').accordion({  fillSpace: true, heightStyle: "content",  
event: 'mouseover', collapsible: true, active: false, icons: false, animate: 750 });

$('.hover').mousemove(function(){
$(this).css('opacity', 1.0);
}).mouseout(function(){
$(this).css('opacity', 0.5);
});




function rand_scene(scenes){

if ( scenes[scenes.length-1] == "prison0" ){

scenes.pop();


$('img').attr('src', 'images/Prison.jpg');

$('audio').attr('src', 'audio/');

$('#choice1').text('choice content 1');

$('#choice2').text('choice content 2');

$('#choice3').text('choice content 3');

$('#check1').click(function(){
score += 2;
return rand_scene(scenes);
});

$('#check2').click(function(){
return rand_scene(scenes);
});

$('#check3').click(function(){
score++;
return rand_scene(scenes);
});
}

if ( scenes[scenes.length-1] == "socserv1" ){

scenes.pop();

$('img').attr('src', 'images/soc_serv.jpg');

$('audio').attr('src', 'audio/');

$('#choice1').text('choice content 1');

$('#choice2').text('choice content 2');

$('#choice3').text('choice content 3');

$('#check1').click(function(){
score += 3
return rand_scene(scenes);
});

$('#check2').click(function(){
score++;
return rand_scene(scenes);
});

$('#check3').click(function(){
score += 2;
return rand_scene(scenes);
});

}

if ( scenes[scenes.length-1] == "college3" ){

scenes.pop();

$('img').attr('src', 'images/college_debt.jpg');

$('audio').attr('src', 'audio/');

$('#choice1').text('choice content 1');

$('#choice2').text('choice content 2');

$('#choice3').text('choice content 3');

$('#check1').click(function(){
return rand_scene(scenes);
});

$('#check2').click(function(){
return rand_scene(scenes);
});

$('#check3').click(function(){
return rand_scene(scenes);
});

}

if ( scenes[scenes.length-1] == "unity2" ){

scenes.pop();

$('img').attr('src', 'images/united.jpg');

$('audio').attr('src', 'audio/');

$('#choice1').text('choice content 1');

$('#choice2').text('choice content 2');

$('#choice3').text('choice content 3');

$('#check1').click(function(){
return rand_scene(scenes);
});

$('#check2').click(function(){
return rand_scene(scenes);
});

$('#check3').click(function(){
return rand_scene(scenes);
});
}


}


var scenes = [ "prison0", "socserv1", "unity2", "college3" ];

function shuffle(array) {
var counter = array.length;
var temp = 0;
var index = 0;

// While there are elements in the array
while (counter > 0) {
// Pick a random index
index = Math.floor(Math.random() * counter);

// Decrease counter by 1
counter--;

// And swap the last element with it
temp = array[counter];
array[counter] = array[index];
array[index] = temp;
}

return array;
}

$(document).ready(function(){

shuffle(scenes);
//document.getElementById("menu_ops").innerHTML = scenes;

//var rand_page = Math.floor(Math.random() * 4);
var score = 0;
//var cont = 1;
rand_scene(scenes);

});

正如您所看到的,一个场景已被选择。 #choice1/2/3 中的一些属性和文本已更改。然后,用户使用#check1/2/3(html 中的单选按钮)进行选择。单击单选按钮后,他们的分数(这是内部的,他们看不到)会更新,并且应该从数组中提取下一个“场景”。

如上所述,它有点有效,但它往往会跳过“prison0”场景,除非“prison0”场景是打乱数组中的最后一个元素。

在调用这样的函数时我必须遗漏一些东西。

感谢您的帮助,如果还有什么需要澄清的,请告诉我。谢谢。

这是 fiddle 链接。看起来不太好,但是可以看到底部的选择 radio ,并且一些场景确实发生了变化。我确实更改了 else if 语句。

jsfiddle

EDITADD:我自己解决了这个问题。在上面的代码中,我在选择新场景时从数组中弹出。在我自己的代码中,我将 pop() 移至 $()click(function(){};

这解决了所有问题并给了我我需要的结果。感谢大家的帮助!

最佳答案

我建议的第一件事是将 rand_scene 函数中的第二个、第三个和第四个 if 语句更改为 else if,这样它们仅当前面的 if 语句不满足时才运行。

这将解决您基本上可以满足该函数中所有 if 语句的问题。拿这个例子...

var ar = [1,2,3,4];

if (ar[ar.length - 1] == 4) {
console.log("four");
ar.pop();
}
if (ar[ar.length - 1] == 3) {
console.log("three");
ar.pop();
}
if (ar[ar.length - 1] == 2) {
console.log("two");
ar.pop();
}
if (ar[ar.length - 1] == 1) {
console.log("one");
ar.pop();
}

第一个 if 语句将计算为 true,因为数组中的最后一个元素是 4。这将记录“4”,然后删除数组的最后一个元素。

然后,下一个 if 语句也将计算为 true,因为数组的最后一个元素现在是 3。

等等..

但是,如果您将其更改为这样,那么它将在一个真正的 if 语句处停止,而不是运行所有这些语句...

var ar = [1,2,3,4];

if (ar[ar.length - 1] == 4) {
console.log("four");
ar.pop();
}
else if (ar[ar.length - 1] == 3) {
console.log("three");
ar.pop();
}
else if (ar[ar.length - 1] == 2) {
console.log("two");
ar.pop();
}
else if (ar[ar.length - 1] == 1) {
console.log("one");
ar.pop();
}

在不知道你的代码有多少是伪代码、有多少是字面代码的情况下,我无法帮助进一步整理,但是有很多重复可以删除,使代码更干净,更易于阅读和维护。

这显然只是一个示例,但它与上面相同,但有所缩减......

var ar = [1,2,3,4];
var value = ar.pop();

switch(value) {
case 1:
console.log("one");
break;

case 2:
console.log("two");
break;

case 3:
console.log("three");
break;

case 4:
console.log("four");
break;
}

关于javascript - 在 Javascript 中递归调用函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29629301/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com