0
特定のdivの処理ページの結果を表示し、結果を反復して各結果を表示するスクリプトがあります。各結果はクリック可能で、クリックすると別のdivが表示され、ユーザーが指定した情報に応答できるようになります。私が抱えている問題は、最初のサイクルではうまくいきますが、結果がクリックされた2番目のサイクルから、同じ情報の複数のインスタンスが表示されます。サイクルが終了したら、すべてのインスタンスをクリアすると、2番目のサイクルは最初のサイクルとまったく同じになります。サイトがここにあるprofessor-sausage-fingers最初のサイクルの後にticker jqueryスクリプトが正しく機能しない
サイトがロードされた後、最初のサイクルで質問のいずれかをクリックして動作した後、右下隅にティッカーが動作する前に少しの遅延があり、ボックスポップが表示されますポップアップ・ボックスの一番上に定義されている同じ質問で、これは私が正しく動作させる方法です。ティッカーが質問のサイクルを実行し、2番目のサイクルを開始し、質問をクリックし、ポップアップボックスに選択した質問の複数の定義が表示されますが、これは発生したくありません。ボックスをクリアするには、ページをリフレッシュする必要があります。
次のようにこの関数を作成するために使用されるコード：
$.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-->
私は、これが具体的
$('#scrollingDiv .scrollingDiv_Inner:first').slideUp(function() {
$(this).appendTo($('#scrollingDiv')).slideDown();
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);
及びこれらの線を調整する必要のあるコードであると信じここで私は質問creaを削除する必要があります次のサイクルで複製されないようにするか、最初のサイクルの後に停止して、関数が最初に実行されたかのようにリフレッシュします。私は.show()と.hide()でも.empty()と.remove()を使ってみましたが、どちらもうまくいきませんでした。これは正しい方法ではないかもしれませんが、他のコードは見つからず、プラグインを使いたくありません。