Question

以下是针对以下要求的plunker链接：

https://plnkr.co/edit/Ae8Pit3sFqvnM9gat0za?p=preview

＆＃13;

// Code goes here
$(document).ready(function() {
  showAlerts();
});

function showAlerts() {
  setTimeout(function() {
    $('#alerts').show("fast", function() {
      setTimeout(function() {
        $("#alerts").hide();
        $(".alertsBadge").attr("data-badge", "2");
      }, 10000);
    });
  }, 10000);
  $(".alertsBadge").click(function() {
    $("#alerts").toggle();
  });
}

function saveAlertResponse() {
  $("#alerts input[type='radio']:checked").closest('.alertHolder').hide();
  $("#successBanner").show();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="alertsBadge" id="alertsBadge" data-badge=""><span class="fa fa-bell">Alerts</span></a>
<div id="alerts" style="display:none;">
  <div id="successBanner" style="display:none;">Your response has been saved</div><br/>
  <form>
    <div id="shouldRead">You should answer the following:</div><br/>
    <div class="alertHolder">
      <div>Your gender?</div>
      <input type="radio" name="gender" value="male"> Male<br>
      <input type="radio" name="gender" value="female"> Female<br>
    </div><br/>
    <div class="alertHolder">
      <div>You smoke??</div>
      <input type="radio" name="smoke" value="Yes"> Yes<br>
      <input type="radio" name="smoke" value="No"> No<br>
    </div><br/>
    <div class="alertHolder">
      <div>You drink??</div>
      <input type="radio" name="drink" value="Yes"> Yes<br>
      <input type="radio" name="drink" value="No"> No<br>
    </div><br/>
    <input type="submit" onclick="saveAlertResponse(); return false;" />

＆＃13;

要求如下：

在第一页加载时，警报div应在2分钟后打开/显示。 A）场景1：如果用户没有回答任何问题一世。它应该在2分钟后隐藏，并在2分钟后再次出现，如果他没有回答则继续这样做 II。隐藏时，警报顶部的徽章应显示未答复的问题数。 B）场景2：如果用户回答任何问题一世。已经回复的问题 - 应该隐藏在点击保存上，并且横幅应该出现在顶部说＆＃34;响应已保存＆＃34;。在此之后，在十秒钟内，整个警报div应隐藏，警报顶部的徽章应显示未答复的问题数。 II。如果任何问题未得到答复，警报应在2分钟后显示 III。应该读取ID的div也应该消失。如果他回答了所有问题，那么横幅应该出现在最顶层，并且＃34;响应已保存＆＃34;。在此之后，十秒钟内整个警报div应该隐藏，警报顶部的徽章应该消失。
每当警报打开并且＃34;响应已保存＆＃34;

Answer 1

试试这个

$( document ).ready(function() {
    var interval = 0;
    var form_submitted = false;
    var periodic_interval_check;


$(".alertsBadge").click(function(){
    $("#alerts form").show();
    $("#alerts").toggle();

    if($("#alerts:visible").length==1){
      periodic_interval_check = setInterval(updateDiv,1000);
    }else{
     clearInterval(periodic_interval_check)
    }

});

function updateDiv(){
  var answered   =  check_answered_count()
  var unanswered =  3 - check_answered_count()


  if(interval == 120 && form_submitted){
       /* if intervall reaches 2 the user is inactive hide element/s */

       alert('Form Submitted::    Answered:'+ answered +' unanswered:' + unanswered)
       $("#successBanner").show();
       $("#alerts form").hide();

       clearInterval(periodic_interval_check)
   }
   else if(interval == 120 && !form_submitted){
      alert('Form Not Submitted::    Answered:'+ answered +' unanswered:' + unanswered)
      interval = 0;
      /* restart once again */
      $("#alerts").hide();
      if($("#alerts:hidden").length==1){
        clearInterval(periodic_interval_check)
      }


   }
   interval = interval+1;
   console.log(interval);
}

function saveAlertResponse(){
  form_submitted = true
  var answered   =  check_answered_count()
  var unanswered =  3 - check_answered_count()
  if(check_answered_count()==3){
    clearInterval(periodic_interval_check)
    $("#successBanner").show();
    $("#alerts form").hide();
  }else{
    $("#alerts form").hide();
  }
  interval = 0;
  alert('Form Submitted::    Answered:'+ answered +' unanswered:' + unanswered)
}


function check_answered_count(){
  return $("#alerts input[type='radio']:checked").length
}

$("form").on("submit", function(e){
  e.preventDefault();
  saveAlertResponse()
})

});

警报根据用户响应显示隐藏

1 个答案: