Question

我有一个脚本，显示特定div中处理页面的结果，然后迭代结果并一个接一个地显示每个结果。每个结果都是可点击的，当点击时会打开另一个div，以允许用户对给定的信息做出响应。我遇到的麻烦是在第一个周期内，这种方法很好，但是从点击结果的第二个周期开始，它显示了相同信息的多个实例。如何在循环结束时清除所有实例，以便第二个循环与第一个循环完全相同。该网站在professor-sausage-fingers

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

用于创建此功能的代码如下：

    $.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();

这里我需要删除创建的问题，以便它不会在下一个循环中复制或在第一个循环后停止并刷新函数，就好像它是第一次运行该函数一样。我已尝试使用.show()和.hide() .empty()和.remove()但这些都没有奏效，甚至可能这不是正确的做法，但我没有找到其他建议的代码，我不想使用插件。

Answer 1

我可以看到你多次附加相同的文字。尝试输入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％它会起作用，但它是朝着正确方向迈出的一步。

第一个周期后，Ticker jquery脚本无法正常工作

1 个答案: