Question

我已经实现了两个div类box和box2，box2可以拖到三个div类box中的任何一个。 class box包含从数组中随机选择的值，class box2包含其对应的imagedisplayed，因此可以将其拖动到class box中的任何一个。

我已经将相应的图像存储在tempimages数组中，并尝试检查drop（）函数中的tempimages == 0，以便一旦值超过计数器，就从数组项中获取值并填充类框。

我无法执行上述循环操作

如何用值重新填充框并重复该过程。

我该如何实现？

var items = [  
    { label: '1:40', url: '1.png'  },
    { label: '2:20', url: '2.png'  },
    { label: '3:50', url: '3.png'  },
    { label: '4:45', url: '4.png'  },
    { label: '5:35', url: '5.png'  },
    { label: '6:10', url: '6.png'  },
    { label: '7:15', url: '7.png'  },
    { label: '8:10', url: '8.png'  },
    { label: '9:30', url: '9.png'  },
    { label: '10:40', url:'10.png' },
    { label: '11:20', url:'11.png' }
]

var tempimages = [];
var array2=[];
array2 = items.slice(); 


var len=array2.length;
console.log(len);
var item;

function rvalue() {
    ptags = document.querySelectorAll('[name="values"]');
    console.log(items);
    console.log(array2);  
    console.log(ptags);
    console.log(ptags)
    for (var index = 0; index < 3; index++) {
        randomIndex = Math.floor(Math.random() * array2.length);
        item = array2[randomIndex];
        ptags[index].textContent = item.label;
        tempimages.push({data:item, index: randomIndex});
        ptags[index].dataset.itemIndex = randomIndex;
    }
    var tlen=tempimages.length;
    console.log(tempimages[0])
    console.log(tempimages);
    console.log(tlen);
}
    

function displayAllImages() {
    if (tempimages.length == 0) {
        rvalue();
        //return;
    }
    item = tempimages.shift(); 
    image = document.getElementById('slide');
    image.src = item.data.url;
    image.dataset.itemIndex = item.index;
};

$(function() {
    rvalue();
    displayAllImages(); 
}); 

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {

    ev.preventDefault();
    console.log(ev.srcElement);

    var data = ev.dataTransfer.getData("Text");
    var el = document.getElementById(data);
    //alert(data);
    //alert(el);
       
    var x=document.getElementById("slide").dataset.itemIndex;
    var y = ev.target.dataset.itemIndex;

// alert("x=>" + x + " y=>" + y);
  
    if(x==y){
        el.parentNode.removeChild; 
        ev.currentTarget.style.backgroundColor = 'initial'; 
        var pParagraph = ev.currentTarget.firstElementChild;
        ev.currentTarget.removeChild(pParagraph);
        item=this.item;
        var arrayvalue=item.dataindex;
        array2.splice(arrayvalue,1);
        console.log(array2); 
        displayAllImages();
        console.log(tempimages.length);
        alert("sucessfull");

        if (tempimages.length == 0) {
            alert("NO more images");
            rvalue();
    
        }
  
    } else {
        alert("WRONG PLACE");
    }
}

.box {
    width: 35px;
    height:35px;
    display:inline-block;
    border-radius:5px;
    border:2px solid #333;
    border-color: #e6e600;
    margin:-2px;
    border-radius: 10%;
    background-color:   #bfff80;
    vertical-align: middle;
}
.box2 {
    float: left;
    width: 30px;
    height: 30px;
    float: left;
    margin-top:3%;
    padding-top:2%;
    border:1px solid #000066;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="10"><p name="values"></p></div>
    <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="11"><p name="values"></p></div>
    <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="12"><p name="values"></p></div>
</div>
<div class="box2" draggable="true" ondragstart="drag(event)" id="2">
    <img src=""  draggable="true" id="slide" style="width:30px; height:30px; border-radius: 50%;" border="rounded"/>
</div>

Answer 1

如果要使用条件循环功能，则可以使用JavaScript并在函数技术中使用该功能。

语法是：

function function () {
    if (condition) {
        // Your code

        // Call the function
        function();
    }
};

function();

一个例子是：

var number = 0;

function writeNumbers() {
  if (number < 11) {
    document.write(number + "<br>");
    number++
    writeNumbers();
  }
};

// Call the function
writeNumbers();

您还可以使用 for循环。

语法是：

for(variable; condition; variable++) {
    // Your code
}

一个例子是：

for (var number = 0; number < 11; number++) {
  document.write(number + "<br>");
};

Answer 2

您应该使用Recursion Function技术。

递归是自身直接或间接调用函数的过程。递归允许您编写一些非常优雅的代码。但是在使用递归时，您需要了解pitfal。

例如：我们假设此循环从0到9（10次）开始。

function function (initValue) {    
    if (initValue > 10) {
          return;
    }
    function(initValue++);
};

Answer 3

可能是因为目标元素不再位于DOM上图像标签通过功能'drop（）'删除

function drop(ev){
 if(x==y){
  // el.parentNode.removeChild; <-- try to remove this line
 }
}

在此行的函数“ displayAllImages（）”中导致错误：

image = document.getElementById('slide'); //<--- try not to remove this target
image.src = item.data.url;
image.dataset.itemIndex = item.index;

如何使用条件循环功能

3 个答案: