Сортировка div на основе пользовательских атрибутов данных с помощью javascript
У меня есть список div. Каждый div содержит настраиваемый атрибут данных, называемый «цель данных». Цели данных содержат числа. Эти цифры не имеют никакого отношения к заказу.
С помощью 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
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В консоли вашего браузера вы должны получить следующую ошибку:
Uncaught TypeError: Cannot set property 'order' of undefined
Это означает, что объект jQuery не имеет свойства style, поэтому он обращается с ним как с undefined. Если вы хотите изменить свойства css объектов jQuery, используйте вместо этого .css (). Ваш код должен выглядеть так:
$('div[data-target = "111222"]').css('order', '2');
$('div[data-target = "222333"]').css('order', '1');
Прикрепил Скрипка.
Попробуй это:
function myFunction() {
document.querySelector('div[data-target = "111222"]').style.order = "2";
document.querySelector('div[data-target = "222333"]').style.order = "1";
}<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>