jQuery的褪色的对象数组 - 一次一个项目 [英] Jquery fade in array of objects - items one at a time

问题描述

每天学习很多关于jquery的知识。然而，似乎我不能在我的生活中弄清楚如何在这个多维数组中显示一个项目，同时每个项目都在淡入淡出。 *注意我不希望这些追加，只显示一组，然后淡出并淡入到下一组。这里有一些信息给你的专业人士。

基本上我在这里存储我在我的json对象中命名数据的结果。这似乎循环通过每一次，如果我把警报（结果['问题']）它会给我每个值一次，但是当试图应用到我的div，其中我使用了一个span类。有效的，它会循环整个事情，并给我在数组中的最后一个项目。 2 + 2 lol duh 1 2.我在这里做错了什么？

来自php页面的对象（称为数据）

pre> [{id：238，question：这是一个名词？，回答：马}，{id： 238，问题：哪一个是名词？，回答：长，{id：238，问题：哪一个是名词？答案：漂亮}，{id：238，问题：这些是名词？，答案：毛发}，{id：238问题：2 + 2 lol duh 1 2，answer：4}]


代码

  for（var i = 0; i< data.length; i ++）{
 result = data [一世]; 
 console.log（result ['question']）; 
 
 
 liText + ='< span>< h5> + result [question] +'< / h5>'; 
 liText + ='< p>< b>选项：& nbsp;< / b>'+ result [answer]; 
 
 liText + ='< / p>< / span>'; 
 
 $ b $ .each（result ['question']，function（index）{
 $（this）.delay（400 * index）.fadeIn（300）; 
 
 
}）; 
 $（'。Active'）。text（result ['question']）; 
 
 
 
 
 $ b $结果的控制台记录[注意] *注意这些是正确的，5个不同的问题，前4个是相同的。  
 
 
 这些是名词？ 
 
 index .... mid = 119（line 227）
 
这些是名词？ 
 
 index .... mid = 119（line 227）
 
这些是名词？ 
 
 index .... mid = 119（line 227）
 
这些是名词？ 
 
 index .... mid = 119（line 227）
 
 2 + 2 lol duh 1 2 
  
 $ b $ ps $ a million尊敬点，如果您能得到它与我上面的liText工作，而不是：
 
 
编辑* 
 
 
 
当删除.each并移动一些东西似乎工作，任何人都可以帮助我先淡出淡出淡出每个我会欣赏它。位于$（'.Active'）
 
 pre $  for（var i = 0; i< data.length; i ++）{ 
 result = data [i]; 
 alert（result ['question']）; 
 $（'。Active'）。text（result ['question']）; 
  




解决方案


$ b

  for（var i = 0; i< data.length; i ++）{
 result = data [i]; 
 $ b $ var $ question = $（< span>）.text（result ['question']）。hide（）
 .delay（400 * i）.fadeIn（300 ）; 
 
 $（'。Active'）。append（$ question）; 
 
  

我删除了 liText 部分，因为你没有做任何事情。

http ：//jsfiddle.net/Qf3FZ/

Learning a lot about Jquery every day. However it seems I can't for the life of me figure out how to display items in this multidimensional array one item at a time, while fading in and out of each one. *Note I don't wants these to append, just display one set, then fade out and fade in to the next set. Here's some info for you pros.

Basically Here I am storing what I have in my json Object named data into result. This seems to loop through each time as if i put alert(result['question']) it will give me each value one at a time, however when trying to apply this to my div, in which I am using a span class called .Active, it will just loop through the entire thing and give me the last item in the array. 2+2 lol duh 1 2. What I am doing wrong here?? If need be I will try to rig a jfiddle for it.

object coming from php page (called data)

[{"id":"238","question":"Which of these is a noun?","answer":"horse"},{"id":"238","question":"Which of these is a noun?","answer":"long"},{"id":"238","question":"Which of these is a noun?","answer":"pretty"},{"id":"238","question":"Which of these is a noun?","answer":"hair"},{"id":"238","question":"2+2 lol duh 1 2","answer":"4"}]

Code

for (var i = 0; i < data.length; i++) {
    result = data[i];
    console.log(result['question']);


    liText += '<span><h5>'+result["question"]+'</h5>';
    liText += '<p><b>Option:&nbsp;</b>'+result["answer"];

    liText += '</p></span>';


    $.each(result['question'], function(index) {
        $(this).delay(400*index).fadeIn(300);


    });
    $('.Active').text(result['question']);

    }

Console Log of result[question] *note these are correct, 5 different questions, the first 4 are the same.

Which of these is a noun?

index....mid=119 (line 227)

Which of these is a noun?

index....mid=119 (line 227)

Which of these is a noun?

index....mid=119 (line 227)

Which of these is a noun?

index....mid=119 (line 227)

2+2 lol duh 1 2

ps * a million respect points if you can get it to work with the liText I have above instead :)

edit*

When removing the .each and moving up some things around this seems to work, anyone that can help me first out the fadein and fade out of each I would appreciate it. Located in $('.Active')

for (var i = 0; i < data.length; i++) {
    result = data[i];
    alert(result['question']);
    $('.Active').text(result['question']);

解决方案

Give this a try:

for (var i = 0; i < data.length; i++) {
    result = data[i];

    var $question = $("<span>").text(result['question']).hide()
                               .delay(400*i).fadeIn(300);

    $('.Active').append($question);
}

I removed the liText part entirely as you were not doing anything with it.

http://jsfiddle.net/Qf3FZ/

这篇关于jQuery的褪色的对象数组 - 一次一个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！