У меня есть список дел. Каждый div содержит собственный атрибут данных, который называется «data-target». Цель данных содержит числа. Эти цифры не имеют ничего общего с заказом.
С помощью Javascript я хочу создать список для правильного порядка div.
Например:
- Где пользовательский атрибут "4321", установите позицию 1.
- Где пользовательский атрибут «5849», установите позицию 2.
...
Ниже вы можете найти пример того, о чем я думаю, но он не работает.
HTML / CSS
<html>
<head>
<style>
#main {
width: 400px;
height: 100px;
border: 1px solid #000000;
display: flex;
}
#main div {
width: 70px;
height: 70px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:green;" data-target="111222"> </div>
<div style="background-color:blue;" data-target="222333"> </div>
</div>
<button onclick="myFunction()">Try it</button>
JAVASCRIPT
<script>
function myFunction() {
$('[data-target="111222"]').style.order = "2";
$('[data-target="222333"]').style.order = "1";
}
</script>
Первый div с зеленым фоном должен переключиться на вторую позицию. Я нашел здесь рабочий пример, но вызывал его по ElementID, а не по пользовательскому атрибуту данных: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_order