我有一个显示联系人列表的 DIV 列表,其中一些 DIV 可能随机具有特定的 online
类名称。
我想更改 transform
样式属性的 translateY
值,以将online
联系人推送到其他联系人之上。
我目前的情况是这样的:
<div id="list">
<div class="contact" style="transform: translateY(0px)">Contact 1</div>
<div class="contact" style="transform: translateY(50px)">Contact 2</div>
<div class="contact online" style="transform: translateY(100px)">Contact 3</div>
<div class="contact" style="transform: translateY(150px)">Contact 4</div>
<div class="contact online" style="transform: translateY(200px)">Contact 5</div>
<div class="contact online" style="transform: translateY(250px)">Contact 6</div>
<div class="contact" style="transform: translateY(300px)">Contact 7</div>
</div>
运行我的纯 JavaScript 函数后会发生什么,将联系人 3、5 和 6 推到订单上方,新的 DOM 应该如下所示:
<div id="list">
<div class="contact" style="transform: translateY(150px)">Contact 1</div>
<div class="contact" style="transform: translateY(200px)">Contact 2</div>
<div class="contact online" style="transform: translateY(0px)">Contact 3</div>
<div class="contact" style="transform: translateY(250px)">Contact 4</div>
<div class="contact online" style="transform: translateY(50px)">Contact 5</div>
<div class="contact online" style="transform: translateY(100px)">Contact 6</div>
<div class="contact" style="transform: translateY(300px)">Contact 7</div>
</div>
现在,我应该看到联系人列表重新排序,因为具有 online
类的 DIV 具有新的 translateY
值。
这是我尝试过的:
var contacts = document.getElementsByClassName("online");
for(var i = 0; i < contacts.length; i++)
{
var current = contacts[i].style.transform;
contacts[i].style.transform = "translateY(0px)";
var mainElements = document.getElementsByClassName("contact");
mainElements[i].style.webkitTransform = current;
mainElements[i].style.MozTransform = current;
mainElements[i].style.msTransform = current;
mainElements[i].style.OTransform = current;
mainElements[i].style.transform = current;
console.log('current element transform', current);
console.log('current element transform after change', slides[i].style.transform);
console.log('first element', mainElements[i].style.transform);
//value is not changing to the new value, it remains 0 --^
}
我认为代码很清楚,这就是我尝试了很长时间的事情,我知道我做错了什么,但我找不到确切的位置。
注意:我知道还有很多其他方法可以对项目进行重新排序,例如移动整个节点或使用 jQuery 或其他东西,但由于某些原因,我不希望有任何其他方法与我正在使用的方法不同,纯 JavaScript 并更改translateY 值(以防万一有人尝试用其他方法向我提供建议)。
希望我能在这里找到一些帮助。
谢谢。
最佳答案
无需翻译,可以更轻松地完成,但既然您在其他答案中说过,您必须坚持翻译,这里有适合您的功能
function orderByOnline() {
// Select all contants
const allContacts = document.querySelectorAll(".contact");
// Prepare arrays where you will add online and offline contacts
let onlineContacts = [], notOnlineContacts = [];
// Use spread operator on query selector and use filter function
// to check if contact has class online - means he is online
[...allContacts].filter(function(contact) {
if (contact.classList.contains("online")) {
onlineContacts.push(contact);
} else {
notOnlineContacts.push(contact)
}
});
// Now parse throu online contacts, start from 0 because variable
// i will be used to determine translate value
for (let i = 0; i < onlineContacts.length; i++) {
const translateValue = i * 50;
onlineContacts[i].style.transform = `translateY(${translateValue}px)`;
}
// Sort offline contacts, but starting point has to be length of online contacts
// so you can get proper values
for (let i = onlineContacts.length; i < notOnlineContacts.length; i++) {
const translateValue = i * 50;
notOnlineContacts[i].style.transform = `translateY(${translateValue}px)`;
}
}
关于javascript - 使用 "transform"样式属性对特定 DIV 重新排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54868594/