javascript - JS/jQuery - 动画随机名称选择器

Question

我正在尝试使用 JS 和 jQuery 创建抽奖券挑选脚本。

到目前为止一切顺利 - 我的脚本有效。不过，现在我想让它更加直观，以便我们可以在汇编中运行它。

我有一个采用以下格式的 JS 对象:

var TempObj = { 'Student_ID' : i, 'Student_Name' : data.users[i].Student_Name };
RewardPurchases.PurchasesArray[Count] = TempObj;

然后我使用此代码随机选择一名学生:

$('button#random').click( function() {
    // "Total" is just the array length
    var Num = Math.floor(Math.random() * Total+1);
    Num--;

    // prove that the system has picked a random number out of the list
    alert("Random number out of " + Total + " is..." + Num);

    // find the array entry where the key is our random "Num"
    for (var i in RewardPurchases.PurchasesArray) {
        if (i == Num) {
            // we've found our entry, now we need more information about the corresponding student
            var TutorGroup = '';

            Frog.API.get('timetable.getClasses',
            {
                'params': {'student': RewardPurchases.PurchasesArray[i].Student_ID },
                'onSuccess': function(data) {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].subject.name == "Tut Period") {
                            TutorGroup = data[i].name.replace("/Tp", "");
                        }
                    }
                }
            });

            // print out the student's information - he or she is the winner!
            alert("Ticket number " + Num + " in the LEAP database belongs to...\n\n\n" + RewardPurchases.PurchasesArray[i].Student_Name.toUpperCase() + " (" + TutorGroup + ")");
        }
    }
} );

我想 - 非常简短地 - 显示每个学生的名字，直到票被选中(即 RewardPurchases.PurchasesArray[Num] 已找到)，然后我希望它停止并增加字体大小(可能会说 WINNER!在它上面或其他东西)。

这是否可能，并且相对简单，使用 jQuery？

编辑

我试过下面的代码，它只显示一个名字。我哪里错了？

$('button#random').click( function() {
    var Num = Math.floor(Math.random() * Total);

    for (var i in RewardPurchases.PurchasesArray) {

        if (typeof RewardPurchases.PurchasesArray[i] === 'object' && typeof RewardPurchases.PurchasesArray[i] !== null) {

            $('#display').queue( function() { 
                $(this).text(RewardPurchases.PurchasesArray[i].Student_Name.toUpperCase()).show().delay(250); 
                $(this).dequeue();
            } );

        }

        if (i == Num) {
            var TutorGroup = '';

            Frog.API.get('timetable.getClasses',
            {
                'params': {'student': RewardPurchases.PurchasesArray[i].Student_ID },
                'onSuccess': function(data) {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].subject.name == "Tut Period") {
                            TutorGroup = data[i].name.replace("/Tp", "");
                        }
                    }
                }
            });

            break;
        }
    }
} );

提前致谢

Answer 1

如果我理解你的问题，你想要这样的东西:在数字比较之前输入它。

$('#nameDisplay').text(RewardPurchases.PurchasesArray[i].Student_Name.toUpperCase()).show().delay(300);

在 alert 之前/而不是 alert 之前的 if 语句 中输入:

$('#nameDisplay').animate({'font-size': 36}, 1500, function() {
    $(this).prepend('<span>!!! WINNER !!!</span>');
});

nameDisplay 应该是您页面上的某种(隐藏)元素，样式如您所愿。尝试使用 CSS 和动画函数进行试验，以获得插入的跨度和 nameDisplay 元素的良好外观。