1

在我当前的项目中，当我尝试更改 html 元素的属性时，我遇到了一些奇怪的行为（从我的角度来看）。

在我的代码中，定义了一个 javascript 对象 - 这个对象有一个 'this.element' 属性，包含一个 html 元素，它通过构造函数传递。在这个对象中，我有几个函数。在其中一个函数中，我试图通过执行以下操作来更改该对象的某些样式：

this.element.style.visibility = "hidden";

尝试执行此操作时没有错误，但样式保持不变。一段时间后，我发现了一个解决方法：

document.getElementById(this.element.id).style.visibility = "hidden";

这基本上是一样的。这行得通，我可以设置元素的样式。尽管此解决方法有效，但它要求我的元素具有 ID。虽然这不是问题，但如果我能解决这个问题，我的编码会变得容易得多。

我正在使用 Chrome 进行测试，一旦项目准备好部署，我们将使用相同的浏览器，因此使用不同的浏览器对我来说并不是一个真正的选择。

如果有人能帮助我理解/解决这种情况，我将不胜感激:) - 提前致谢

编辑：更多代码。我放在一起的这个例子说明了我在做什么。但是，当我自己运行它时，我无法实现我所描述的行为。

我不知道这是否重要，但在我的情况下，代表“changeAllStyles”的函数在构造函数之后被调用时工作正常。此函数的所有子序列调用都是由于调用了来自 websockets 的“onMessage”事件。

var myObjArray = [];

function init(){
    //Using jQuery to select all elements containing the "data-whatever" attribute:
    var elements = $('*[data-whatever]');

    //Create a myObj object for each of theese elements:
    for (var i = 0; i < elements.length; i++) {
        var params = elements[i].getAttribute("data-whatever");
        myObjArray.push(new myObj(elements[i], params));
        myObjArray[i].changeStyle();
    }
}

function myObj(element, params){
    this.element = element;
    this.params = params;

    this.changeStyle = function(){
        this.element.style.visibility = "hidden";
    };
}

function changeAllStyles(){
    for (var i = 0; i < myObjArray.length; i++) {
        myObjArray[i].changeStyle();
    }
}
4

2 回答 2

0

您显示的代码没有任何问题，除了它的复杂性。

我的直觉是，幕后正在发生不圣洁的事情。我无法调试我看不到的代码，但我可以提出一个便宜的解决方法。

您也可以使用 收集元素document.querySelectorAll('[data-whatever]')，使用 getAttribute() 取回您的各个参数并直接使用样式，如下所示：

function changeAllStyles()
{
    var elements = document.querySelectorAll ('[data-whatever]');
    for (var i = 0; i < elements.length; i++) 
    {
        var elt = elements[i];
        my_parameters = elt.getAttribute ('data-whatever');
        play_with (my_parameters);
        elt.style.color = a_nice_shade_of_pinkish_brown;
    }
}

我同意 TJ 克劳德。

我敢打赌，有人在你背后破坏和重建 DOM 元素。如果它们是通过副本重新创建的，您仍然可以通过 Id 或类或属性访问它们的克隆，但对原始 DOM 元素的引用已失效。

要追踪这一点，您可以尝试以下操作：

this.changeStyle = function()
{
    this.element.__check = "booh!";
    var possible_clone = document.getElementById (this.element.id);
    if (possible_clone.__check != "booh!")
    {
        report_to_boss ("something fishy there");
    }
};
于 2013-12-30T04:37:46.457 回答
0

听起来好像在代码的其他地方，您在初始化this.element并重新创建 DOM 元素后删除了它，如下所示：

HTML：

<div id='bar'><span id='foo'>This is foo</span> inside 'bar'</div>

JavaScript：

var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
bar.innerHTML = "<span id='foo'>This is a new foo</span> inside 'bar'";
foo.style.visibility = "hidden"; // <== No effect, wrong element

正如你所看到的，我们得到了“foo”元素，得到了“bar”元素，然后用全新的东西替换了“bar”的内容。这意味着“bar”内的所有元素都被删除，然后创建新元素。碰巧其中一个新元素的 ID 为“foo”，因此

document.getElementById(foo.id).style.visibility = "hidden";

...即使不起作用也会foo.style.visibility = "hidden";起作用，因为它是一个完全不同的元素，恰好具有相同的 ID。

于 2011-02-04T13:48:35.630 回答