2016-04-19 134 views
0

我有一个脚本,显示特定div中处理页面的结果,然后迭代结果并逐个显示每个结果。每个结果都是可点击的,点击后会打开另一个div以允许用户对所给信息做出回应。我遇到的麻烦是在第一个周期内这个工作正常,但从第二个周期点击结果时,它显示了同一信息的多个实例。如何在循环结束后清除所有实例,以便第二个循环与第一个循环完全相同。网站在这里professor-sausage-fingers第一次循环后,Ticker jquery脚本无法正常工作

网站加载后,在股票收益开始在右下角工作之前有一个短暂的延迟,在它工作之后,点击第一个周期中的任何问题,您将得到一个箱子流行在弹出框顶部定义相同的问题,这正是我希望它工作的方式。让股票代码运行问题循环并开始第二个循环,然后单击一个问题,在弹出框中,您将看到所选问题的多个定义,我不想发生这些问题。要清除该框,该页面将需要刷新。

如下使用创建此函数的代码:

$.getJSON('includes/************.php', function(data) { <!--jason call to listQuestions.php processing page--> 

     $.each(data, function(key, val) { <!--iterate through the responce from the listQuestions.php processing page--> 

     var QuestionID = val.Question_ID; <!--assign each Question_ID from the database to the variable QuestionID--> 
     var Question = val.Question; <!--assign each Question from the database to the variable Question--> 
     var QuestionInput = val.Question_ID; <!--assign each Question_ID from the database to the variable QuestionInput--> 

console.log(QuestionID); <!--print out QuestionID in browser console for error checking purposes. Commented out in final code--> 
console.log(Question); <!--print out Question variable in browser console for error checking purposes. Commented out in final code--> 

<!--start append html code into question results--> 
$('#question_results_inner').append('<div id="questionNumber">Question '+ QuestionID +'</div>'); 
$('#question_results_inner').append('<div id="' + QuestionID + '" class="QuestionContent">'+ Question +'</div>'); 
$('#question_results_inner').append('<input type="button" id="'+ QuestionInput +'" class="QuestionAnswerButton" name="answerQuestion" value="Answer Question '+ QuestionID +'">'); 
<!--end append html code into question results--> 

<!--start Add div dynamically into scrolling div--> 
$('#scrollingDiv').append('<div id="scrollingDiv_inner_'+ QuestionID +'" class="scrollingDiv_Inner" style="display:none"><div id="questionNumber" class="scrollDivQuestNumber">Question '+ QuestionID +' </div><div id="' + QuestionID + '" class="QuestionContentScrollDiv">'+ Question +'</div></div>'); 
<!--end Add div dynamically into scrolling div--> 


<!--starts the sliding function to show dynamically created div from database--> 
function ticker() { 

    $('#scrollingDiv .scrollingDiv_Inner:first').slideUp(function() { 
     $(this).appendTo($('#scrollingDiv')).slideDown(); 

     $(this).click(function(event) { 
    $("#answerQuestion").show("slow"); 
    $("#scrollingDiv").hide("slow"); 
    $("#scrollingDiv").empty(); 

    var txt = $(this).text(); 

    <!--alert (txt);--> 

    $('#answerQuestion_inner').append('<div id="chosenQuestion" class="chosenQuestion"><div id="chosenQuestionTxt" class="chosenQuestiontxt">'+ txt +'</div></div>') 



}); 

    }); 

}<!--end of the sliding function to show dynamically created dic from database--> 

setInterval(function(){ ticker(); }, 5000); <!--sets the time interval in miliseconds for the ticker animation--> 


     }); <!--end of iterate through the responce from the listQuestions.php processing page--> 


    }); <!--end of jason call to listQuestions.php processing page--> 

相信这是需要调整

function ticker() { 

    $('#scrollingDiv .scrollingDiv_Inner:first').slideUp(function() { 
     $(this).appendTo($('#scrollingDiv')).slideDown(); 

     $(this).click(function(event) { 
    $("#answerQuestion").show("slow"); 
    $("#scrollingDiv").hide("slow"); 
    $("#scrollingDiv").empty(); 

    var txt = $(this).text(); 

    <!--alert (txt);--> 

    $('#answerQuestion_inner').append('<div id="chosenQuestion" class="chosenQuestion"><div id="chosenQuestionTxt" class="chosenQuestiontxt">'+ txt +'</div></div>') 
    }); 

    }); 

} 
setInterval(function(){ ticker(); }, 5000); 

代码和这些线特别

$('#scrollingDiv .scrollingDiv_Inner:first').slideUp(function() { 
    $(this).appendTo($('#scrollingDiv')).slideDown(); 

在这里我需要删除问题crea因此它不会在下一个循环中复制或在第一个循环之后停止并刷新该功能,就好像它是第一次运行该功能一样。我曾尝试使用.show().hide().empty().remove()但这些都没有工作,甚至可能是这不是正确的方式做到这一点,但我没有发现其他建议的代码,我不想使用插件。

回答

0

我能看到你多次追加相同的文本。尝试将IF-statment和检查周期是这样的:

function ticker() { 
    var cycle = 0; 
    $('#scrollingDiv .scrollingDiv_Inner:first').slideUp(function() { 

    if (cycle < 1) { 
     $(this).appendTo($('#scrollingDiv')).slideDown(); 

     $(this).click(function(event) { 
     $("#answerQuestion").show("slow"); 
     $("#scrollingDiv").hide("slow"); 
     $("#scrollingDiv").empty(); 

     var txt = $(this).text(); 

     <!--alert (txt);--> 

     $('#answerQuestion_inner').append('<div id="chosenQuestion" class="chosenQuestion"><div id="chosenQuestionTxt" class="chosenQuestiontxt">' + txt + '</div></div>') 
     }); 
     cycle++; 
    } else { 
     $(this)..slideDown(); 
    } 

    }); 

} 
setInterval(function() { 
    ticker(); 
}, 5000); 

我不是100%它会工作,但它是朝着正确方向迈出的一步。