如何解决swal库中的增量文本元素
我试图通过增加Swal库中的'text'属性，即（文本：'RICHTIG！'），来记录放置在右侧可放置对象中的相应拖动元素的数量。因为这是我的替代品alert（'right！'）;本质上，我想要实现的目标是，每次触发警报消息时都会增加警报消息并显示其分数。但是，我是编程新手，尽管我已经找到了在代码中确切地进行更改的地方，但问题是我不知道如何在增加函数的if语句中从Swal很好地定义'text'属性。 >
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!',}).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>
解决方法
因此，我找到了一种从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!',}).then(
function () {},//handling the promise rejection
function (dismiss){
if (dismiss === 'timer'){
//console.log('I was closed by the timer')
}
}
)
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
