Question

我在 var x 的ondrop（）中获得了不带.jpg扩展名的放置项的图像名称。

在 var y 中，我想要从item []获取x值的对应项。

请拖放.box002以将三个具有值的.box类框起来

我打算进行条件检查，因此有必要

如何获取？

如何获取y值？

var tempimages = [];


function rvalue() {
  const 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'  }
	   ]
	  
ptags = document.querySelectorAll('[name="values"]');
  



for (let index = 0; index < 3; index++) 
  {
      randomIndex = Math.floor(Math.random() * items.length),
      
      item = items[randomIndex];
      ptags[index].textContent = item.label;
      tempimages.push(item);
	
  }
	
  
}
	

function displayAllImages() {
  if (tempimages.length === 0) 
  {
    return;
  }
	item = tempimages.shift(),  
    image = document.getElementById('slide');
  image.src = item.url;
};

$(function() {
  
  rvalue();
  displayAllImages(); 
});	

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {

  ev.preventDefault();
  

 var data = ev.dataTransfer.getData("Text");
 var el = document.getElementById(data);
 alert(data);
 alert(el);
 var x=document.getElementById("slide").src.split("/").pop().split(".")[0];
 alert(x);
 var y

  
 //if(x==y)
  {
  el.parentNode.removeChild; 

  
  ev.currentTarget.style.backgroundColor = 'initial'; 

  var pParagraph = ev.currentTarget.firstElementChild;
  ev.currentTarget.removeChild(pParagraph);
  
  displayAllImages();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container2">
    
            <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>

    
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">

     <img src=""  draggable="true" id="slide" style="width:50px; height:50px; border-radius: 50%;" border="rounded"/>
        
</div>

Answer 1

有很多方法，但是在这种情况下，我更喜欢使用data-*。
如果是这样，则可以在元素上加上任何参数。

首先，在设置randomIndex时将ptags[index].textContent = ~放在元素上。

ptags[index].dataset.itemIndex = randomIndex;

接下来，在您的slide元素中执行相同的操作。

// in for loop...
tempimages.push({data:item, index: randomIndex});
// in displayAllImages method
image.src = item.data.url;
image.dataset.itemIndex = item.index;

然后，您可以在放置方法中选择那些data-*。

var x = document.getElementById("slide").dataset.itemIndex;
var y = ev.target.dataset.itemIndex;

For Example

从下拉式常量数组中获取标签值

1 个答案: