Question

我正在构建一个由9个单元格组成的接口。当一个人鼠标悬停在一个单元格上时，我希望其他单元格变得可见，并更改某些单元格的文本内容。如果我创建单独的函数来改变每个单元格的内容，我就可以做到这一点，但这很疯狂。

我希望单个函数根据所涉及的单元格更改文本。我创建了一个可以接受n个参数的函数，并通过基于传递给函数的参数进行更改来循环。它不起作用。

该功能的代码如下。如果我将其称为onMouseOver="changebox('div3')"，则当我将鼠标悬停在单元格上时，该参数会使其成为函数。如果我取消注释document.write（cell）语句，在这个例子中，它会将div3打印到屏幕上。那么......为什么不对div3单元格的内容进行任何更改？

function changebox() {
    for (var i = 0; i < arguments.length; i++) {
        var cell = document.getElementById(arguments[i]).id;
        var text = "";

        if (cell == 'div3') {
            text = "Reduced Travel";
        } else if (cell == 'div4') {
            text = "Reduced Cost";
        }
        //document.write(cell)
        cell.innerHTML = text;
    }
}

Answer 1

在您的代码中cell是一个包含对象id的字符串。更新代码如下

function changebox() {
    for (var i = 0; i < arguments.length; i++) {
        var cell = document.getElementById(arguments[i]),
            text = "";

        if (cell.id == 'div3') {
            text = "Reduced Travel";
        } else if (cell.id == 'div4') {
            text = "Reduced Cost";
        }
        //document.write(cell)
        cell.innerHTML = text;
    }
}

更新： 您可以像@Tushar建议的那样减少代码。

无需迭代arguments（假设只有两个元素，但可以针对更多元素进行修改）。

function changebox() {
    // As arguments is not real array, need to use call
    // Check if div is present in the arguments array
    var div3Index = [].indexOf.call(arguments, 'div3') > -1,
        div4Index = [].indexOf.call(arguments, 'div4') > -1;

    // If present then update the innerHTML of it accordingly        
    if (div3Index) {
        document.getElementById('div3').innerHTML = 'Reduced Travel';
    } else if (div4Index) {
        document.getElementById('div4').innerHTML = 'Reduced Cost';
    }
}

Answer 2

function changebox() {
    var args = [].slice.call(arguments);
    args.map(document.getElementById.bind(document)).forEach(setElement);
}

function setElement(ele) {
  if (ele.id === 'div3') {
     ele.innerHTML = "Reduced Travel";
  } else if (ele.id === 'div4') {
     ele.innerHTML = "Reduced Cost";
  }
}

这使您的功能易于测试

Answer 3

当您为单元格变量指定元素的id并更改无效的单元格的innerHTML时。

    var changeText = function() {
    console.log("in change text");
    for(var i= 0; i<arguments.length; i++) {
        var elem = document.getElementById(arguments[i]);
        var cell = document.getElementById(arguments[i]).id;
        var text = "";
        console.log(cell)
        if (cell === "div-1") {
            text = cell+" was selected!!";
        } else if(cell === "div-3") {
            text = cell+" was selected!!";
        } else {
            text = cell+" was selected";
        }

        elem.innerHTML = text;
    }
}

这会正确地改变div mouse的文本!!

用于更改innerHTML函数的Javascript无效

3 个答案: