javascript - 从 swal 库中增加文本元素

Question

我正在尝试通过增加 Swal 库中的“文本”属性，即（文本：“RICHTIG！”）来记录拖放到右侧可拖放元素中的相应拖动元素的数量。因为这是我的替代 alert('right!'); 本质上，我想用它实现的是每次触发警报消息时增加警报消息并显示其分数。然而，我是编程新手，虽然我已经想出了在我的代码上确切地更改它的位置，但问题是我不知道如何在增加函数的 if 语句中很好地定义来自 Swal 的“文本”属性。

function startTimer(duration,display){
  var timer = duration,seconds;
  setInterval(function(){
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;
    if(--timer < 0){
      timer = duration-1;
      clearInterval(timer);
      alert('Erneuert Versuchen!')
    }
  }, 2000);
}

window.onload = function () {
   var thirtySeconds = 60 / 2,
      display = document.querySelector('#time');
   startTimer(thirtySeconds,display);
};

var makeUnselectable = function($target){
  $target
    .addClass('unselectable')
    .attr('unselectable,on')
    .attr('draggable','false')
    .on('dragstart', function(){return false;});
  $target
    .find('*')
    .attr('draggable','false')
    .attr('unselectable','on');
};

var dragged;

function allowDrop(event) {}
/* events fired on the draggable target */
function drag(event) {

}

document.addEventListener("dragstart", function(event) {
  // store a ref. on the dragged elem
  dragged = event.target;
  // make it half transparent
  event.target.style.opacity = 0.5;
}, false);

document.addEventListener("dragend", function(event) {
  // reset the transparency
  event.target.style.opacity = "";
}, false);

/* events fired on the drop targets */
document.addEventListener("dragover", function(event) {
  // prevent default to allow drop
  event.preventDefault();
}, false);

document.addEventListener("dragenter", function(event) {
  // highlight potential drop target when the draggable element enters it
  if (event.target.className == "dropzone") {
    event.target.style.background = "purple";
  }

}, false);

document.addEventListener("dragleave", function(event) {
  // reset background of potential drop target when the draggable element leaves it
  if (event.target.className == "dropzone") {
    event.target.style.background = "";
  }

  console.log('test');

}, false);

gameScore = document.getElementById('gameScore');

function drop(event) {
  
  // prevent default action (open as link for some elements)
  event.preventDefault();
  // move dragged elem to the selected drop target
  //check if the target is dropzone and dragged element have the required group value if yes allow append child else dont do anything just reset color and opacity
  debugger;
  if (event.target.className == "dropzone" && dragged.attributes.group.value == event.target.attributes.group.value) {
    event.target.style.background = "";
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
    //console.log('test');
    swal({
      text: 'RICHTIG!',
      timer: 2000,
      buttons: false,
    }).then(
      function increase() {
        if (text === 'RICHTIG!'){
          score = document.getElementById("kategorie").childNodes.length;
          gameScore.innerHTML = score; 
        }
      },
      //handling the promise rejection
      function (dismiss){
        if (dismiss === 'timer'){
          //console.log('I was closed by the timer')
        }
      }
    )
  } else {
    if (event.target.className == "dropzone") {
      event.target.style.background = "";
    }
    dragged.style.opacity = 0.5;
    //alert('please drop the item to section : '+dragged.attributes.group.value)
    swal({
      text: 'FALSCH!',
      timer: 2000,
      buttons: false,
    }).then(
      function () {},
      //handling the promise rejection
      function (dismiss){
        if (dismiss === 'timer'){
          //console.log('I was closed by the timer')
        }
      }
    )
  }
}

HTML

<div id="kategorie">
            <img class="pfeil" draggable="false" src="img/pfeil_breiter-01-01.png" alt="pfeil">
            <img class="dropzone" group="1" id="kategorie1" draggable="false" ondrop="drop(event)" ondragover="allowDrop(event)" src="img/kategorie1.jpg" alt="kategorie1">
            
            <img class="dropzone" group="2" id="kategorie2" draggable="false" ondrop="drop(event)" ondragover="allowDrop(event)" src="img/kategorie2.jpg" alt="kategorie2"> 
           
            <img class="dropzone" group="3" id="kategorie3" draggable="false" ondrop="drop(event)" ondragover="allowDrop(event)" src="img/kategorie3.jpg" alt="kategorie3"> 
        </div>
        <div class="kasten" id="effekte">
            <div class="b-line" id="texte1" group="2" draggable="true" ondragstart="drag(event)">Mitläufereffekt</div>
            <div class="b-line" id="texte2" group="2" draggable="true" ondragstart="drag(event)">Falsche Mehrheit</div>
            <div class="b-line" id="texte3" group="2" draggable="true" ondragstart="drag(event)">Pluralistische Ignoranz</div>
            <div class="b-line" id="texte4" group="1" draggable="true" ondragstart="drag(event)">Bestätigungsfehler</div>
            <div class="b-line" id="texte5" group="1" draggable="true" ondragstart="drag(event)">Survivorship Bias</div>
            <div class="b-line" id="texte6" group="1" draggable="true" ondragstart="drag(event)">Verfügbarkeitsheuristik</div>
            <div class="b-line" id="texte7" group="1" draggable="true" ondragstart="drag(event)">Schuss-geht-noch-hinten-los-Effekt</div>
            <div class="b-line" id="texte8" group="1" draggable="true" ondragstart="drag(event)">Dunning-Kruger-Effekt</div>
            <div class="b-line" id="texte9" group="1" draggable="true" ondragstart="drag(event)">Fluch des Wissens</div>
            <div class="b-line" id="texte10" group="3" draggable="true" ondragstart="drag(event)">Optimismusfehler</div>
            <div class="b-line" id="texte11" group="3" draggable="true" ondragstart="drag(event)">Reaktanz</div>
            <div class="b-line" id="texte12" group="3" draggable="true" ondragstart="drag(event)">Zuschauereffekt</div>
            <div class="b-line" id="texte13" group="3" draggable="true" ondragstart="drag(event)">Ausgleichheuristik</div>
            <div class="b-line" id="texte14" group="3" draggable="true" ondragstart="drag(event)">Verlust-Aversion</div>
            <div class="b-line" id="texte15" group="" draggable="true" ondragstart="drag(event)">der Gesunde-Arbeiter-Effekt</div>
        </div>

标签： javascripthtmlsweetalert

Answer 1

所以我找到了一种从 SWAL 库中增加文本警报的方法。从而还记录拖放的正确答案的数量。下面是整个 javascript 代码。

  var score = 0;
  function startTimer(duration,display){
  var timer = duration,seconds;
  setInterval(function(){
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;
    if(--timer < 0){
      timer = duration-1;
      clearInterval(timer);
      alert('Erneuert Versuchen!')
    }
  }, 2000);
}

window.onload = function () {
   var thirtySeconds = 60 / 2,
      display = document.querySelector('#time');
   startTimer(thirtySeconds,display);
};

var makeUnselectable = function($target){
  $target
    .addClass('unselectable')
    .attr('unselectable,on')
    .attr('draggable','false')
    .on('dragstart', function(){return false;});
  $target
    .find('*')
    .attr('draggable','false')
    .attr('unselectable','on');
};

var dragged;

function allowDrop(event) {}
/* events fired on the draggable target */
function drag(event) {

}

document.addEventListener("dragstart", function(event) {
  // store a ref. on the dragged elem
  dragged = event.target;
  // make it half transparent
  event.target.style.opacity = 0.5;
}, false);

document.addEventListener("dragend", function(event) {
  // reset the transparency
  event.target.style.opacity = "";
}, false);

/* events fired on the drop targets */
document.addEventListener("dragover", function(event) {
  // prevent default to allow drop
  event.preventDefault();
}, false);

document.addEventListener("dragenter", function(event) {
  // highlight potential drop target when the draggable element enters it
  if (event.target.className == "dropzone") {
    event.target.style.background = "purple";
  }

}, false);

document.addEventListener("dragleave", function(event) {
  // reset background of potential drop target when the draggable element leaves it
  if (event.target.className == "dropzone") {
    event.target.style.background = "";
  }

  console.log('test');

}, false);

// gameScore = document.getElementById('gameScore');
gameScore = document.getElementById('score');


function drop(event) {
  
  // prevent default action (open as link for some elements)
  event.preventDefault();
  // move dragged elem to the selected drop target
  //check if the target is dropzone and dragged element have the required group value if yes allow append child else dont do anything just reset color and opacity
  debugger;
  if (event.target.className == "dropzone" && dragged.attributes.group.value == event.target.attributes.group.value) {
    event.target.style.background = "";
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
    // score hoch zaehlen:
    score ++;
    document.getElementById('score').innerHTML= score;
    //
    //console.log('test');
    swal({
      text: 'RICHTIG!',
      timer: 2000,
      buttons: false,
    }).then(
      function increase() {
        
      },
      //handling the promise rejection
      function (dismiss){
        if (dismiss === 'timer'){
          //console.log('I was closed by the timer')
        }
      }
    )
  } else {
    if (event.target.className == "dropzone") {
      event.target.style.background = "";
    }
    dragged.style.opacity = 0.5;
    //alert('please drop the item to section : '+dragged.attributes.group.value)
    swal({
      text: 'FALSCH!',
      timer: 2000,
      buttons: false,
    }).then(
      function () {},
      //handling the promise rejection
      function (dismiss){
        if (dismiss === 'timer'){
          //console.log('I was closed by the timer')
        }
      }
    )
  }
}