Javascript元素处理

Javascript element handling

本文关键字：处理 元素 Javascript      更新时间：2023-09-26

我制作了一个表，其中包含来自数据库的许多网格项。
我使用纯javascript和AJAX来编辑和删除这些griditems。

代码: 

var main_table=document.getElementById('main-table'),//get the element handler for the table
griditems=main_table.querySelectorAll('.griditem'),//get an array with all the griditems in the main-table
griditems_count=griditems.length;
var griditem_array = [];
for(var i=0;i<griditems_count;i++){
    griditem_array[i] = new create_griditem(griditems, i); //here i create a array for every single element and pass the handler for the griditems and the position on the table to the object
function create_griditem(griditems, griditems_count){
    var pos=griditems_count;
    var id=griditems[pos].getAttribute('data-id'); //the griditem div's also have the id from the Database
    var griditems_buttons=griditems[pos].querySelectorAll('.griditem-buttons');
    var del_button = griditems_buttons[0].querySelectorAll('.delete')[0];
    del_button.addEventListener('click', function() {
        alert('Delete '+id);
    }, false);
    //there are more things called for creating a delete and edit button for every griditem
}

我从表中获取每个griditem，并为每个griditem创建一个对象数组，以便为相应的项目创建适当的按钮。

我的问题是，正如您在第13行(griditems[pos])中看到的那样，我通过从主表的查询选择器中的位置获得元素句柄(或DOM句柄)。但是这个网格是一个可排序的网格，所以我可以拖放项目，并且具有相应id的griditem的位置完全不同。

那么我如何通过我的id获得DOM处理程序，我传递给对象?或者有人能给我一些建议，如何以更好的方式编码整个情况?

编辑:

我已经创建了一个小提琴来查看整个程序的运行:http://jsfiddle.net/MCRte/

如您所见，在最后一行main_table.removeChild(griditems[pos]);中，我通过查询选择器(.griditem)中的位置为主表获取DOM句柄。但是，如果在我删除一个之前，它们的排序发生了变化……其他的将被删除。

如何通过id获得DOM句柄?

根本不需要使用自动执行的匿名函数。只需使用浏览器的事件API。

事件处理程序函数接收一个名为event的参数，该参数是单击事件对象。event.target属性是由用户点击的元素，在您的情况下，它将是具有类名"。delete"的按钮。您可以从该元素开始爬上文档树，直到到达具有"。griditem"类名，并抓取data-id属性，以便知道要删除哪个元素。

var gridItems = document.querySelectorAll('#main-table .griditem'),
    i = 0,
    length = gridItems.length;
for(i; i < length; i++) {
    gridItems[i]
        .querySelector(".griditem-buttons .delete")
        .addEventListener("click", deleteGridItem);
}
function deleteGridItem(event) {
    event.preventDefault();
    var gridItem = event.target;
    // Climb the document tree from the .delete button to the .griditem
    while (gridItem) {
        if (gridItem.classList.contains("griditem")) {
            break;
        }
        else {
            gridItem = gridItem.parentNode;
        }
    }
    if (gridItem) {
        alert("Delete item: " + gridItem.getAttribute("data-id"));
    }
    else {
        throw new Error("Failed to find griditem");
    }
}

我假设在某个时候表行将从文档中删除。必须分离事件处理程序以避免内存泄漏。我发现最好的方法是使用事件委托。

JsFiddle: http://jsfiddle.net/Yj2eg/

var table = document.getElementById("main-table");
table.addEventListener("click", function(event) {
    if (event.target.nodeName === "BUTTON") {
        event.preventDefault();
        console.log("BUTTON");
        if (event.target.classList.contains("delete")) {
            deleteItem(event.target);
        }
        else if (event.target.classList.contains("edit")) {
            editItem(event.target);
        }
    }
});
function deleteItem(button) {
    var gridItem = getGridItem(button);
    if (confirm("Delete item: " + gridItem.getAttribute("data-id") + "?")) {
        gridItem.parentNode.removeChild(gridItem);
    }
}
function editItem(button) {
    var gridItem = getGridItem(button);
    alert("Edit item: " + gridItem.getAttribute("data-id"));
}
function getGridItem(button) {
    var gridItem = button;
    while (gridItem) {
        if (gridItem.classList.contains("griditem")) {
            break;
        }
        else {
            gridItem = gridItem.parentNode;
        }
    }
    if (!gridItem) {
        throw new Error("Could not find griditem");
    }
    return gridItem;
}

我不完全确定您的实际问题是什么，但如果您试图为您的griditem中的一个按钮设置一个单击侦听器，该按钮根据griditem的data-id属性执行操作，那么像这样的东西将完成这项工作:

var main_table = document.getElementById('main-table');   //get the element handler for the table
var griditems = main_table.querySelectorAll('.griditem'); //get an array with all the griditems in the main-table
for (var i = 0; i < griditems.length; i++) {
    var griditem = griditems[i];
    var id = griditem.getAttribute('data-id');
    var del_button = griditem.querySelector('.delete');
    del_button.addEventListener('click', function(id) {
        alert('Delete ' + id);
    }(id), false);
}
相关文章：