#javascript #php #html #css #ajax
Вопрос:
У меня есть таблица результатов, полученных из базы данных MySQL, где каждый TR имеет уникальный идентификатор и класс. При нажатии на TD в строке скрипт переключается между различными цветами в зависимости от статуса заказа, а затем записывает каждый переключатель обратно в базу данных с помощью AJAX. Проблема, с которой я сталкиваюсь, заключается в том, что цвет изменяет последнюю строку таблицы td, а не текущую щелкнутую строку td. Я новичок в JS и Jquery и прочитал, что проблема может заключаться в «подъеме», который уже несколько дней сбивает меня с толку. Мы будем очень признательны за любую помощь.
lt;td id="lt;?php echo $row[ 'order_id' ]; ?gt;" class="lt;?php echo $row[ 'order_id' ]; ?gt; white" onclick="changeBackground(this.id)"gt;lt;?php echo $row[ 'order_id' ]; ?gt;lt;/tdgt; lt;scriptgt; function getSelected() { return document.getElementsByClassName(lt;?php echo $row[ 'order_id' ]; ?gt;); } function changeBackground(id) { var all = getSelected(); var x = id alert(x); for (var i = 0; i lt; all.length; i ) { var color = all[i].classList; if (color.contains("white")) { all[i].classList.add("red"); all[i].classList.remove("white"); $.ajax({ type: "POST", url: 'update_color.php', data: {color: 2}, success: function (data) { console.log(data); }, }); } else if (color.contains("red")) { all[i].classList.add("green"); all[i].classList.remove("red"); $.ajax({ type: "POST", url: 'update_color.php', data: {color: 3}, success: function (data) { console.log(data); }, }); } else if (color.contains("green")) { all[i].classList.add("pink"); all[i].classList.remove("green"); $.ajax({ type: "POST", url: 'update_color.php', data: {color: 4}, success: function (data) { console.log(data); }, }); } else if (color.contains("pink")) { all[i].classList.add("yellow"); all[i].classList.remove("pink"); $.ajax({ type: "POST", url: 'update_color.php', data: {color: 5}, success: function (data) { console.log(data); }, }); } else if (color.contains("yellow")) { all[i].classList.add("white"); all[i].classList.remove("yellow"); $.ajax({ type: "POST", url: 'update_color.php', data: {color: 1}, success: function (data) { console.log(data); }, }); } } } lt;/scriptgt; Комментарии:
1. Можете ли вы привести некоторые примеры HTML в виде визуализации (т. Е. Посмотреть исходный код)?
2. возможно, вы передадите идентификатор
getSelected()функции при ее вызове, и если вы ожидаете, что у вас будет более одного класса с одинаковым значением атрибута (all.length), поэтому также существует более одного идентификатора с одинаковым значением атрибута, значение атрибута ID должно быть уникальным
Ответ №1:
Если вы можете немного изменить вывод HTML, я считаю, что приведенный выше Javascript может быть значительно упрощен, но я должен подчеркнуть, что следующее не проверено. Это order_id кажется странным в классах, назначенных элементу — предположительно целому числу, которое в любом случае недопустимо как класс — возможно, если бы это было назначено в качестве dataset атрибута, это имело бы больше смысла и все еще могло бы быть указано в вашем коде javascript, если это необходимо. Установить класс просто как один из различных цветов, через которые вы проходите, поможет!
Итак, возможно, изменить HTML следующим образом:
lt;td data-id="lt;?php echo $row['order_id'];?gt;" class="white"gt; lt;?php echo $row['order_id'];?gt; lt;/tdgt; Затем Javascript
const matrix={ 'white':'red', 'red':'green', 'green':'pink', 'pink':'yellow', 'yellow':'white' }; document.querySelectorAll('table td').forEach( td=gt;td.addEventListener('click',function(e){ let id=this.dataset.id; let colour=this.className; let keys=Object.values( matrix ); this.classList.remove( colour ); this.classList.add( matrix[ colour ] ); let fd=new FormData(); fd.set('color', keys.indexOf( colour) ); fd.set('id',id); fetch( 'update_color.php',{ method:'post',body:fd} ) .then(r=gt;r.text()) .then(text=gt;{ console.log(text) }) })) Комментарии:
1. Код отлично работает, большое спасибо.