3 
function labelOnClick () {
    function makeDivId(id) {
        return id + "_div";
    };

    var div = this.getElementById(makeDivId(this.id));

    if (div) {
        div.parentNode.removeChild(div);
    } else {
        div = document.createElement("div");
        div.innerHTML = "welcome";
        div.id = makeDivId(this.id);

        this.appendChild(div);
    }
}




<label id="1" onclick="labelOnClick()" > BROWSER </label>
<label id="2" onclick="labelOnClick()"> GAMING CONSOLE </label>

在上面的示例中，我试图在div单击标签时创建一个元素，并在再次单击标签时删除创建的div元素，但它不起作用。

4

3 回答 3

4

您的代码中有几个问题：

  • 分配事件处理程序时label onclick="..."，事件处理程序函数内的内联 ()this将指向全局对象 ( window)。您可以this作为参数传递给函数。

  • 如果没有找到元素，某些浏览器在将结果分配给变量时会失败getElementById()（如果我错了，请有人纠正我）。

像这样的东西会起作用：

<script>
function labelOnClick (me) {
    var makeDivId=function (id) {
        return id + "_div";
    };
    var div;

    if (document.getElementById(makeDivId(me.id))) {
        div=document.getElementById(makeDivId(me.id));
        div.parentNode.removeChild(div);
    } else {
        div = document.createElement("div");
        div.innerHTML = "welcome";
        div.id = makeDivId(me.id);

        me.appendChild(div);
    }
}
</script>

<label id="1" onclick="labelOnClick(this)" > BROWSER </label>
<label id="2" onclick="labelOnClick(this)"> GAMING CONSOLE </label>

jsFiddle 演示

于 2011-05-27T12:29:28.297 回答
1

我的建议是不要使用 javascript 添加 div，而是在单击时更改 div 标签的可见性样式属性。

function labelOnClick () {
    function makeDivId(id) {
        return id + "_div";
    };

    //var div = this.getElementById(makeDivId(this.id));

    if (document.getElementById("divID").style.visibility == "visible") {
        document.getElementById("divID").style.visibility = "hidden";          
    } else {
        document.getElementById("divID").style.visibility = "hidden";  
    }
}

    <label id="1" onclick="labelOnClick()" > BROWSER </label>
    <label id="2" onclick="labelOnClick()"> GAMING CONSOLE </label>
于 2011-05-27T12:25:50.437 回答
1

您正在尝试使用“this”关键字代替“document”，因为“this”指向 labelOnClick 函数，所以它不起作用。

function labelOnClick(e)
{
    function makeDivId(id)
    {
        return id + "_div";
    };

    var div = document.getElementById(makeDivId(this.id));

    if (div)
    {
        div.parentNode.removeChild(div);
    }
    else
    {
        div = document.createElement("div");
        div.innerHTML = "welcome";
        div.id = makeDivId(this.id);

        var element = e.target;
        element.parentNode.insertBefore(div, element.nextSibling);
    }
}


<label id="1" onclick="labelOnClick(event)" > BROWSER </label>
<label id="2" onclick="labelOnClick(event)"> GAMING CONSOLE </label>

我写这篇文章是假设您使用的东西支持事件对象的“目标”属性（例如，不是 Internet Explorer）。如果您需要跨浏览器支持，您可以手动完成或使用 jQuery 或 Prototype 等框架。

原始代码的编写方式是，我假设您希望每个标签都有一个 div，并且我猜测了定位（紧跟标签）。

于 2011-05-27T12:42:09.863 回答