• 上下各有一个框,框里有元素(点击下面的元素,显示到上面的框里面去,按一定顺序排放)


    /**
    * 点击备选答案里面的内容(item里),显示在上面的内容框里(slot里)
    * 之后提交按钮显示出来,然后点击提交答案。
    */
    function objBtnS(){
      var objtext = document.querySelectorAll(".slot");//slot上面的框
      var objBtn = document.querySelectorAll(".item");//下面的框
      var showHow = document.querySelector('.show-how');//点击执行的按钮
      for (var i = 0; i < objBtn.length; i++) {
        var b = objBtn[i]; //遍历之后的每个item
        b.addEventListener(MIGlobals.eventTouchEnd, function(){
          if (iStuas) {//true执行
            var userAanwer = this.getAttribute("user-answer");
            var thisText = this.innerHTML;//item里面的是内容
          if (this.getAttribute("data-down") == "y") {//item里面的属性 == y 返回false
            return false;
          }
          this.setAttribute("data-down", "y");
          var m = 0;
          for (var j = 0; j < objtext.length; j++) {
          var text = document.querySelector(".slot[data-ind='"+ m +"']");
          if(text.getAttribute("data-status") == "n"){
            var dataInd = parseInt(text.getAttribute("data-ind"));
            text.innerHTML = thisText;
            text.setAttribute("data-status", "y");
            text.setAttribute("user-answer-right",userAanwer);
            checkStatus(m);//++
            if (dataInd < 4) {
              MIGlobals.addClass(text, "textright");
            }else if ((dataInd ==4) || (dataInd == 9)|| (dataInd == 14)) {
              MIGlobals.addClass(text,"textdown");
            }else if (4 < dataInd && dataInd < 9) {
              MIGlobals.addClass(text,"textleft");
            }else if (9 < dataInd && dataInd < 14) {
              MIGlobals.addClass(text,"textright");
            }else if (dataInd == 15) {
              MIGlobals.addClass(text,"textleft");
            };
          break;
        }
        m++;
      };
      this.style.opacity = "0";
    }
      if (checkAllBlanksFilled()) {
      showHow.style.display = 'block';
      selfTest.style.height = 0 + 'px';
      selfGren.style.display = 'none';
      }else{
        showHow.style.display = 'none';

      }
    })
    }
    }
    /**
    * 当答案已经出现在内容框里,点击回到原来的位置。
    * 和上面的objBtnS()函数是一个联动的反应
    */
    function objtextS(){
      var objtext = document.querySelectorAll(".slot");
      var objBtn = document.querySelectorAll(".item");
      var showHow = document.querySelector('.show-how');
      for (var i = 0; i < objtext.length; i++) {
        var TextBtn = objtext[i];
        TextBtn.setAttribute("data-status", "n");
        TextBtn.addEventListener(MIGlobals.eventTouchEnd,function(){
        if (iStuas) {//++
          var text = this.innerHTML;
          this.innerHTML ="";
          this.setAttribute("data-status", "n");
          for (var j = 0; j < objBtn.length; j++) {
            var Btn = objBtn[j];
            var BtnText = Btn.innerHTML;
            var dataInd = parseInt(this.getAttribute("data-ind"));//++
            if(Btn.getAttribute("data-down") == "y" && BtnText == text){
              Btn.style.opacity = "1";
              Btn.setAttribute("data-down", "n");
              compareArray();

            if (dataInd < 4) {
              MIGlobals.removeClass(this,"textright");
            }else if ((dataInd ==4) || (dataInd == 9)|| (dataInd == 14)) {
              MIGlobals.removeClass(this,"textdown");
            }else if (4 < dataInd && dataInd < 9) {
              MIGlobals.removeClass(this,"textleft");
            }else if (9 < dataInd && dataInd < 14) {
              MIGlobals.removeClass(this,"textright");
            }else if (dataInd == 15) {
              MIGlobals.removeClass(this,"textleft");
            };
          break;
        }
      };
    }else{

    }
    if (!checkAllBlanksFilled()) {
    showHow.style.display = 'none';
    selfTest.style.height = 274 + 'px';
    selfGren.style.display = 'block';
    }
    });
    };

    }

  • 相关阅读:
    mysql视图定义以及创建视图
    前端页面调用spring mvc接口发生跨域问题解决方案
    亲测可用的ssm框架搭建
    python--pandas基本操作
    jieba中文处理 python
    爬虫 登录开心网,登录人人网
    Selenium&wevdriver
    django 中间件的一些基本操作
    写一个简单的登录客户端步骤
    个人对ADO连接池的理解
  • 原文地址:https://www.cnblogs.com/patriot/p/5716130.html
Copyright © 2020-2023  润新知