在 Javascript 中需要有关 "this" 的帮助

Question

单击 div 中的每个按钮时，我希望父 div 消失。我不想为每个按钮编写 onclick="this.parentNode.style.display='none'" ，而是想调用一个函数 done() 来使我的代码更清晰，但我的语法在 done() 中不起作用。有什么想法吗？

        <div id="arms_1" class="col_1">
            <p></p>
            <p></p>
            <p></p>
            <button type="button" onclick="this.parentNode.style.display='none'">Done</button>
        </div>

        <div id="arms_2" class="col_2">
            <p></p>
            <p></p>
            <p></p>
            <button type="button" onclick=done()>Done</button>
        </div>

        <div id="arms_3" class="col_3">
            <p></p>
            <p></p>
            <p></p>
            <button type="button" onclick=done()>Done</button>
        </div>

<script>
        function done(){
            this.parentNode.style.display='none';
        };//done fuction ends
</script>

Answer 1

尝试使用 setAttribute() 代替：

<script>
        function done(){
            this.parentNode.setAttribute('display', 'none);
        };//done function ends
</script>

Answer 2

试试这个

    <div id="arms_3" class="col_3">
            <p></p>
            <p></p>
            <p></p>
            <button type="button" onclick=done(this)>Done</button>
        </div>

<script>
        function done(obj){
            obj.parentNode.style.display='none';
        };//done fuction ends
</script>

Answer 3

函数内部的

this 与内联 onclick 中的 this 不同。尝试将其传入。

function done(that){
            that.parentNode.style.display='none';
        };//done fuction ends

<div id="arms_1" class="col_1">
            <p></p>
            <p></p>
            <p></p>
            <button type="button" onclick="this.parentNode.style.display='none'">Done</button>
        </div>

        <div id="arms_2" class="col_2">
            <p></p>
            <p></p>
            <p></p>
            <button type="button" onclick=done(this)>Done</button>
        </div>

        <div id="arms_3" class="col_3">
            <p></p>
            <p></p>
            <p></p>
            <button type="button" onclick=done(this)>Done</button>
        </div>

在函数内部，this 是 Window 对象。在内联点击处理程序中，它指的是 button。根据您所在的执行上下文，this 可以指代不同的事物。

Answer 4

将 (this) 添加到您的 done，然后将其也添加到您的函数。

jsfiddle

代码

<script type="text/javascript">
function done(obj) {
    obj.parentNode.style.display = 'none';
}
</script>
<div id="arms_1" class="col_1">
    <p></p>
    <p></p>
    <p></p>
    <button type="button" onclick="this.parentNode.style.display='none'">Done</button>
</div>
<div id="arms_2" class="col_2">
    <p></p>
    <p></p>
    <p></p>
    <button type="button" onclick="done(this);">Done</button>
</div>
<div id="arms_3" class="col_3">
    <p></p>
    <p></p>
    <p></p>
    <button type="button" onclick="done(this);">Done</button>
</div>

在 Javascript 中需要有关 "this" 的帮助

Need help on "this" in Javascript

javascript

this