如何解决选中复选框时如何将图像从一个div移动到另一个div
我想知道当使用JavaScript选中复选框时如何将图像从一个div移动到另一个div。选中复选框时，它们都应位于div class =“ ekran”中，但是同时如果您选中另一个复选框，则前一个复选框将被取消选中，并且上一个图像应消失。我一直在试图解决这个问题，但是我似乎找不到任何解决方案。所以，如果您有一些想法...
window.addEventListener('load',start,false);
function start() {
var slike = document.getElementsByTagName('img');
var ekran = document.getElementsByClassName('ekran')[0];
document.body.addEventListener('click',menjaj,false);
function menjaj(e) {
var img = document.createElement('img');
img.src = slike.src;
ekran.innerHTML = '';
ekran.appendChild(img);
}
}<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>JavaScript</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/skript.js"></script>
</head>
<body>
<div class="omotac">
<div>
<label><input type="checkbox" name="odabir"><img src="slike/leto1.jpg" alt="leto1"></label>
<label><input type="checkbox" name="odabir"><img src="slike/leto2.jpg" alt="leto2"></label>
<label><input type="checkbox" name="odabir"><img src="slike/leto3.jpg" alt="leto3"></label>
<label><input type="checkbox" name="odabir"><img src="slike/leto4.jpg" alt="leto4"></label>
</div>
<div class="ekran"></div>
</div>
</body>
</html>解决方法
您可以通过为要将图像复制到的div设置目标来使用附加内部html。
这是执行此操作的行
target.innerHTML += document.getElementById(checked).parentElement.innerHTML
这是您代码中的有效版本。
function myFunction(checked) {
console.log ("checked is ",checked)
// Get the checkbox
var checkBox = document.getElementById(checked);
var target = document.getElementById('target')
// If the checkbox is checked,move the image
if (checkBox.checked == true){
target.innerHTML += document.getElementById(checked).parentElement.innerHTML
//remove one line below if you do not want to hide div from source
checkBox.parentElement.innerHTML='';
}
}<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>JavaScript</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/skript.js"></script>
</head>
<body>
<div id="source" class="omotac">
<div>
<label><input id="c1" onclick=myFunction("c1") type="checkbox" name="odabir"><img src="slike/leto1.jpg" alt="leto1"></label>
<label><input id="c2" onclick=myFunction("c2") type="checkbox" name="odabir"><img src="slike/leto2.jpg" alt="leto2"></label>
<label><input id="c3" onclick=myFunction("c3") type="checkbox" name="odabir"><img src="slike/leto3.jpg" alt="leto3"></label>
<label><input id="c4" onclick=myFunction("c4") type="checkbox" name="odabir"><img src="slike/leto4.jpg" alt="leto4"></label>
</div>
<div class="ekran">
<h1>This is target div </h1>
<div id="target"> </div>
</div>
</div>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。