Question

我有一些jQuery代码，我想将其更改为原始JavaScript表单，并且我无法找到构成此jQuery代码的相应元素

$('.rain').append('<div class="drop" id="drop'+i+'"></div>');
$('#drop'+i).css('left',dropLeft);
$('#drop'+i).css('top',dropTop);

我不知道如何将其更改回Javascript，任何帮助都将非常感谢!!

Answer 1

const dropLeft = 5;
const dropTop = 5;
const rain = document.querySelector('.rain');
for (let i = 0; i < 5; i++) {
  let drop = document.createElement('div');
  drop.setAttribute('class', 'drop');
  drop.setAttribute('id', 'drop' + i);
  let dropText = document.createTextNode(i);
  drop.style.left = (dropLeft * i * 10) + 'px';
  drop.style.top = (dropTop * i * 10) + 'px';
  drop.appendChild(dropText);
  rain.appendChild(drop);
}

.drop{
position: absolute;
background: blue;
width: 20px;
height:20px;
border-radius: 20px;
color: white;
text-align: center;
}

<div class="rain"></div>

Answer 2

const dropDiv = document.createElement('div')
dropDiv.className = 'drop'
dropDiv.id = 'drop' + i
dropDiv.style.left = dropLeft
dropDiv.style.top = dropTop
document.querySelector('.rain').appendChild(dropDiv)

将jQuery转换为Raw Javascript

2 个答案: