Question

我在页面上有一个UL，只需点击一个按钮，我就会附加一个li并将其淡入。这对单次点击很有效。但是，当单击按钮两次时，第一个动画立即停止，第二个动画完成。

我已经设置了一个测试页面来演示这个：http://anttears.co.uk/test（测试页面仅在FF中测试过）

在setOpacity函数中为elem的值设置console.log似乎显示javascript按预期工作 - 两个li的到达opacity = 1。然而，第一个li似乎是一个与实际DOM相关的片段。

我故意在没有通常的图书馆的情况下让这种工作成为一种学习经验。

任何帮助非常感谢... 蚂蚁

Answer 1

this.prepend = function(string, elem) {
    var content = elem.innerHTML;
    content = string + content;
    elem.innerHTML = content;
}

永远不要这样做。

您正在获取elem（growlList）的DOM内容，将其序列化为新的HTML字符串，预先添加一些HTML内容，并将已加入的HTML解析回全新的DOM节点。这会丢失所有非HTML可序列化的内容，例如表单字段值，事件处理程序和JavaScript引用。动画仍然引用旧的HTMLElement节点，该节点不再在DOM中，已被新解析的content元素替换。

实际上，您通常希望避免生成HTML字符串：

growl = '<li id="' + gid + '" class="' + className + ' growl" style="display: none"><span class="close" title="close">x</span><h2>' + heading + '</h2><div class="growlContent">' + content + '</div></li>',

该内容中任何未转义的HTML特殊字符，您最多都打破了标记。在最坏的情况下，数据来自恶意用户，你给自己一个XSS安全漏洞。

相反，使用DOM风格的方法，例如：

var span= document.createElement('span');
span.className=span.title= 'close';
span.appendChild(document.createTextNode('x'));
var h2= document.createElement('h2');
h2.appendChild(document.createTextNode(heading));
var div= document.createElement('div');
div.className= 'growlContent';
div.appendChild(document.createTextNode(content))

var li= document.createElement('li');
li.id= gid;
li.className= className;
li.appendChild(span);
li.appendChild(h2);
li.appendChild(div);

gl.insertBefore(li, gl.firstChild);

这很啰嗦，但是编写一个帮助函数来减少打字很容易，例如：

gl.insertBefore(el('li', {id: gid, className: className), [
    el('span', {className: 'close', title: 'close'}, 'x'),
    el('h2', {}, heading),
    el('div', {className: 'growlContent'}, content)
]), gl.firstChild);


// Element creation convenience function
//
function el(tag, attrs, content) {
    var el= document.createElement(tag);
    if (attrs!==undefined)
        for (var k in attrs)
            if (attrs.hasOwnProperty(k))
                el[k]= attrs[k];
    if (content!==undefined) {
        if (typeof(content)==='string')
            el.appendChild(document.createTextNode(content));
        else
            for (var i= 0; i<content.length; i++)
                el.appendChild(content[i]);
    }
    return el;
};

Javascript - 动画在新的动画启动时停止

1 个答案: