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

/**
* 点击备选答案里面的内容(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';
}
});
};

}

posted @ 2016-07-28 20:21  FallenLunatic  阅读(463)  评论(0编辑  收藏  举报