Кнопка викторины следующая не работает, когда строка json удаляется с помощью php и jquery / javascript

Я использовал приведенный ниже код для создания викторины, и он работает хорошо, и следующая кнопка отлично работает, если Que_id, например, (1,2,3,4), но это не будет работать должным образом (1,3,4). как вы можете видеть, вопрос с идентификатором 2 был удален, и это приведет к множеству следующая кнопка вместо обычного One следующая кнопка.

Но моя проблема в том, что если я удалю строку из файла json, например

"que_id":"1","que_desc":"The Best Coders Network","ans1":"Stackoverflow","ans2":"none","ans3":"none"}

или же

{"que_id":"3","que_desc":"Stackoverflow was founded in what year","ans1":"2008","ans2":"none","ans3":"none"}

, в викторине больше не будут отображаться вопросы викторины один за другим через следующая кнопка, а будут отображаться сразу все следующие кнопки. Если я затем попытаюсь нажать любую из разбросанных кнопок «Далее», он опубликует результат.

на стороне php, похоже, викторина отправляется на основе que_id, которая затем передается в увеличенные функции javascript.

Может кто-то помочь мне с этим. Я хочу, чтобы следующая кнопка работала идеально и отображала вопросы викторины один за другим, независимо от того, какие строки были удалены в файле json.

ниже код

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset='utf-8'>
  <script src = "jquery.min.js"></script>
</head>
<body>
  <?php    
    $data = '[{"que_id":"1","que_desc":"The Best Coders Network","ans1":"Stackoverflow","ans2":"none","ans3":"none"},
    {"que_id":"2","que_desc":"Who Founded Stackoverflow","ans1":"Jeff Atwood and Joel Spolsky.","ans2":"none","ans3":"none"},
    {"que_id":"3","que_desc":"Stackoverflow was founded in what year","ans1":"2008","ans2":"none","ans3":"none"},
    {"que_id":"4","que_desc":"Stack Overflow is a privately held by a website","ans1":"Stack Exchange Network","ans2":"none","ans3":"none"}]';    
    $characters = json_decode($data);
    //echo $characters->que_desc;    
    //echo print_r($characters);
    //var_dump($characters);    
    ?>

    <form method='post' id='quiz_form'>
      <?php
      foreach ($characters as $value) {
          $result['que_id']=  $value->que_id ;
          $result['que_desc']= $value->que_desc ;
          $result['ans1']= $value->ans1 ;
          $result['ans2']= $value->ans2 ;
          $result['ans3']= $value->ans3 ;    
    ?>
        <div id = "question_<?php echo $result['que_id'];?>" class='questions'>
          <h2 id = "question_<?php echo $result['que_id'];?>">
            <?php echo $result['que_id'].".".$result['que_desc'];?>
          </h2>
          <div class='align'>
            <label class = "containerg">
    <input type = "radio" value = "1" id='radio1_<?php echo $result['que_id'];?>' name='<?php echo $result['que_id'];?>'>
    <label id='ans1_<?php echo $result['que_id'];?>' for='1'><?php echo $result['ans1'];?></label>
            <span class = "checkmark"></span>
            </label>

            <label class = "containerg">
    <input type = "radio" value = "2" id='radio2_<?php echo $result['que_id'];?>' name='<?php echo $result['que_id'];?>'>
    <label id='ans2_<?php echo $result['que_id'];?>' for='1'><?php echo $result['ans2'];?></label>
            <span class = "checkmark"></span>
            </label>

            <label class = "containerg">
    <input type = "radio" value = "3" id='radio3_<?php echo $result['que_id'];?>' name='<?php echo $result['que_id'];?>'>
    <label id='ans3_<?php echo $result['que_id'];?>' for='1'><?php echo $result['ans3'];?></label>
            <span class = "checkmark"></span>
            </label>

            <input type = "radio" checked='checked' value = "5" style='display:none' id='radio4_<?php echo $result[' que_id '];?>' name='<?php echo $result[' que_id '];?>'>
          </div>
          <br/>
          <input type = "button" id='next<?php echo $result[' que_id '];?>' value='Next!' name='question' />
        </div>
        <?php }?>
    </form>
    <div id='result'>
      Result will Appear Here test
      <br/>
    </div>
    <script>
      $(document).ready(function() {
        var steps = $('form').find(".questions");
        var count = steps.size();
        steps.each(function(i) {
          hider = i + 2;
          if (i == 0) {
            $("#question_" + hider).hide();
            createNextButton(i);
          } else if (count == i + 1) {
            var step = i + 1;

            $("#next" + step).on('click', function() {
              submit();
            });
          } else {
            $("#question_" + hider).hide();
            createNextButton(i);
          }
        });

        function submit() {
          // post to ajax
          $.ajax({
            type: "POST",
            url: "ajax.php",
            data: $('form').serialize(),
            success: function(msg) {
              $("#quiz_form,#demo1").addClass("hide");
              $('#result').show();
              $('#result').append(msg);
            }
          });
        }

        function createNextButton(i) {
          var step = i + 1;
          var step1 = i + 2;
          $('#next' + step).on('click', function() {
            $("#question_" + step).hide();
            $("#question_" + step1).show();
          });
        }
      });
    </script>
</body>
</html>

javascript php jquery

01.07.2018 16:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема с вашим кодом в том, что вы создаете элемент, используя данные с заданными значениями id, и в логике привязки событий jQuery вы предполагаете, что эти значения всегда находятся в продолжении. Если вы удалите какую-либо строку из данных, продолжение и журнал будут прерваны.

Вам необходимо обновить свою логику на основе селектора классов.

Вы можете обновить логику кода следующим образом.

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset='utf-8'>

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


</head>

<body>

<?php


$data = '[{"que_id":"1","que_desc":"The Best Coders Network","ans1":"Stackoverflow","ans2":"none","ans3":"none"},
{"que_id":"2","que_desc":"Who Founded Stackoverflow","ans1":"Jeff Atwood and Joel Spolsky.","ans2":"none","ans3":"none"},
{"que_id":"3","que_desc":"Stackoverflow was founded in what year","ans1":"2008","ans2":"none","ans3":"none"},
{"que_id":"4","que_desc":"Stack Overflow is a privately held by a website","ans1":"Stack Exchange Network","ans2":"none","ans3":"none"}]';



$characters = json_decode($data);
//echo $characters->que_desc;

//echo print_r($characters);
//var_dump($characters);


?>

<form method='post' id='quiz_form'>

<?php
foreach ($characters as $value) {
      $result['que_id']=  $value->que_id ;
    $result['que_desc']= $value->que_desc ;
        $result['ans1']= $value->ans1 ;
        $result['ans2']= $value->ans2 ;
        $result['ans3']= $value->ans3 ;



?>
<div id = "question_<?php echo $result['que_id'];?>" class='questions'>
<h2 id = "question_<?php echo $result['que_id'];?>"><?php echo $result['que_id'].".".$result['que_desc'];?></h2>
<div class='align'>

<label class = "containerg">
<input type = "radio" value = "1" id='radio1_<?php echo $result['que_id'];?>' name='<?php echo $result['que_id'];?>'>
<label id='ans1_<?php echo $result['que_id'];?>' for='1'><?php echo $result['ans1'];?></label>
  <span class = "checkmark"></span>
</label>

<label class = "containerg">
<input type = "radio" value = "2" id='radio2_<?php echo $result['que_id'];?>' name='<?php echo $result['que_id'];?>'>
<label id='ans2_<?php echo $result['que_id'];?>' for='1'><?php echo $result['ans2'];?></label>
  <span class = "checkmark"></span>
</label>

<label class = "containerg">
<input type = "radio" value = "3" id='radio3_<?php echo $result['que_id'];?>' name='<?php echo $result['que_id'];?>'>
<label id='ans3_<?php echo $result['que_id'];?>' for='1'><?php echo $result['ans3'];?></label>
<span class = "checkmark"></span>
</label>




<input type = "radio" checked='checked' value = "5" style='display:none' id='radio4_<?php echo $result['que_id'];?>' name='<?php echo $result['que_id'];?>'>
</div>
<br/>
<input type = "button" class = "next" id='next<?php echo $result['que_id'];?>' value='Next!' name='question'/>
</div>
<?php }?>
</form>
<div  id='result'>
Result will Appear Here test
<br/>
</div>



<script>

$(document).ready(function(){


    var steps = $('form').find(".questions");
    $(".questions").hide();
    var count = steps.length;
    steps.each(function(i){       
        if (i == 0) {   
           createNextButton(i);
           $($(".questions").get(i)).show();
        }
        else if (count==i+1){
           $($(".next").get(i)).off().on('click',function(){
              submit();
           });
        }
        else
        {
         createNextButton(i);
        }

    });
    function submit(){
// post to ajax

         $.ajax({
                        type: "POST",
                        url: "ajax.php",
                        data: $('form').serialize(),
                        success: function(msg) {
                          $("#quiz_form,#demo1").addClass("hide");
                          $('#result').show();
                          $('#result').append(msg);
                        }
         });

    }


    function createNextButton(i){

         $($(".next").get(i)).on('click',function(){
              $(".questions").hide();
              $($(".questions").get(i+1)).show();

        });
    }



});

</script>
</body>
</html>

01.07.2018 17:17

Другие вопросы по теме

Мое время прятаться не работает должным образом

Количество элементов корзины заголовка Ajaxify в Woocommerce

Laravel Недопустимый аргумент для foreach

Как перечислить данные из 2 данных MySQL в таблицу html

SOAP: проблемы с двумя разными конечными точками одной и той же функции WSDL для одного и того же кода PHP

Php - Неустранимая ошибка: Неперехваченная ошибка: класс IntlDateFormatter не найден в C: \ Users \ denni \ PhpstormProjects \ ACNOP OOP \ Main.php в строке 69

Laravel, если маршрут равен нулю или не существует, перенаправление на другую страницу

PHP, Prestashop, foreach во многих подкатегориях и продуктах

Laravel передает переменные в модальный диалог, если идентификатор

Отображение используемых данных с идентификатором сеанса не работает

Кнопка викторины следующая не работает, когда строка json удаляется с помощью php и jquery / javascript

Ответы 1

Другие вопросы по теме

Похожие вопросы