本文旨在解决在PHP循环中嵌入大量重复JavaScript代码的问题。通过使用事件委托、类选择器和事件目标等技术，可以将JavaScript函数定义一次，并在循环生成的每个元素上复用，从而提高代码的可维护性和性能。本文将提供详细的步骤和示例代码，帮助你优化现有的代码结构，使其更加简洁高效。
优化循环内嵌JavaScript代码
在PHP循环中直接嵌入JavaScript代码，特别是当循环次数较多时，会导致大量的代码重复，降低代码的可读性和维护性。以下介绍一种更优雅的方法来解决这个问题，核心思想是将事件监听器绑定到父元素，并利用事件委托机制来处理子元素的事件。
1. 使用类选择器替代ID选择器
在循环中生成HTML元素时，避免使用唯一的ID，而是使用类选择器。这样可以方便地选中所有需要绑定事件的元素。
例如，将：
立即学习“PHP免费学习笔记（深入）”；
<input type='text' id="brand" class="brand-list" name='brand' value="" onkeyup="editSave(), success()">
修改为：
<input type='text' class="brand-list item-brand" name='brand' value="">
2. 利用事件委托绑定事件监听器
将事件监听器绑定到表格或其父元素上，而不是每个单独的元素。当子元素触发事件时，事件会冒泡到父元素，父元素根据事件目标（event.target）来判断是哪个子元素触发的事件，并执行相应的操作。
document.getElementById("mySEARCH").addEventListener("keyup", function(event) { if (event.target && event.target.classList.contains("item-brand")) { // 获取当前行的ID const row = event.target.closest("tr"); const itemId = row.id.replace("line", ""); // 获取当前输入框的值 const brand = event.target.value; // 执行保存操作 editSave(itemId, brand); }});
在这个例子中，我们监听了mySEARCH表格的keyup事件。当event.target（即触发事件的元素）包含item-brand类时，我们才执行相应的操作。event.target.closest(“tr”)用于查找最近的
父元素，然后提取行的ID，并调用editSave函数。
3. 统一JavaScript函数定义
将JavaScript函数定义在循环外部，并修改函数以接受参数，从而实现对不同元素的处理。
例如，将：
立即学习“PHP免费学习笔记（深入）”；
function editSave(){ var id = ; var brand = $("#brand").val(); var itemKind = $("#item-kind").val(); $.post("calculate.php", { save: id, brand: brand, itemkind: itemKind }, function(data) { $('#edit-confirm').html(data); });}
修改为：
function editSave(itemId, brand, itemKind) { var id = itemId; var brand = brand; var itemKind = itemKind; $.post("calculate.php", { save: id, brand: brand, itemkind: itemKind }, function(data) { $('#edit-confirm').html(data); });}
4. 修改PHP代码
修改PHP代码，移除循环中嵌入的JavaScript代码，并添加必要的类和数据属性。
prepare("SELECT * FROM `$list`"); $stmt->execute(); $x = 0; foreach($stmt as $item) { $x++;?> " style="opacity: 1.0;" data-item-id=""> <button class="btn-hide-row activ" data-line="">@@##@@ Keine Items vorhanden
5. 完整的JavaScript代码示例
document.addEventListener("DOMContentLoaded", function() { const table = document.getElementById("mySEARCH"); // 事件委托：品牌修改 table.addEventListener("keyup", function(event) { if (event.target && event.target.classList.contains("item-brand")) { const row = event.target.closest("tr"); const itemId = row.dataset.itemId; // 使用 data-item-id const brand = event.target.value; const itemKind = row.querySelector(".item-kind").value; // 获取 itemKind editSave(itemId, brand, itemKind); } }); // 事件委托：种类修改 table.addEventListener("change", function(event) { if (event.target && event.target.classList.contains("item-kind")) { const row = event.target.closest("tr"); const itemId = row.dataset.itemId; // 使用 data-item-id const brand = row.querySelector(".item-brand").value; // 获取 brand const itemKind = event.target.value; editSave(itemId, brand, itemKind); } }); // 事件委托：隐藏/显示行 table.addEventListener("click", function(event) { if (event.target && event.target.classList.contains("activ")) { const row = event.target.closest("tr"); const itemId = row.dataset.itemId; const line = row; const brand = row.querySelector(".item-brand"); const itemKind = row.querySelector(".item-kind"); const btnLocked = row.querySelector(".btn-list"); const btnImage = row.querySelector(".visibility"); if (line.style.opacity === "1") { line.style.opacity = "0.1"; brand.setAttribute("readonly", ""); itemKind.setAttribute("disabled", ""); btnLocked.setAttribute("disabled", ""); btnImage.setAttribute("src", "images/icon-visible.png"); } else { line.style.opacity = "1"; brand.removeAttribute("readonly"); itemKind.removeAttribute("disabled"); btnLocked.removeAttribute("disabled"); btnImage.setAttribute("src", "images/icon-invisible.png"); } } }); function editSave(itemId, brand, itemKind) { $.post("calculate.php", { save: itemId, brand: brand, itemkind: itemKind }, function(data) { $('#edit-confirm').html(data); }); }});
注意事项：
确保在DOM加载完成后绑定事件监听器，可以使用document.addEventListener(“DOMContentLoaded”, function() { … });。使用data-*属性来存储每个元素的ID，例如”>，然后在JavaScript中使用element.dataset.itemId来访问。根据实际情况调整选择器和事件类型。
总结：
通过使用事件委托、类选择器和统一的JavaScript函数，可以有效地减少PHP循环中嵌入的重复JavaScript代码，提高代码的可维护性和性能。这种方法使得代码结构更加清晰，易于理解和修改。
以上就是优化PHP循环中嵌入的JavaScript代码：避免重复的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1518911.html
微信扫一扫 
支付宝扫一扫 
