如何让函数判断是否应用于 "this" 或其他元素 ID

Question

我有这样的功能：

function toggle(me, style) {
  var myelm = me == '' ? this : document.getElementById(me);
 
  myelm.classList = style; 
}

我希望函数知道何时必须将样式应用于触发元素或其他元素，如以下示例所示：

 <div onclick="toggle(this);"></div> <!--this function should apply to this element only-->
 <div onclick="toggle('otherelement');"></div> <!--this should apply to other element of the DOM-->

但它仅在指定 ID 时有效，不会按预期应用于 this。怎么了？

Answer 1

在第一种情况下，您传递了一个 DOM 元素，在第二种情况下，您传递了一个（非空）字符串。因此，在任何一种情况下，您检查的条件 me == '' 都不成立。其次，this 与函数无关，因为您永远不会使用 this 绑定调用它（this 绑定与传递 this 作为参数不同）。

你需要检查参数的数据类型，当它是一个字符串时，检索 DOM 元素，否则只使用给定的参数 (me) -- 不是 this:

另一件事：您需要在 classList 属性:

上调用 toggle 方法

function toggle(me, style) {
  var myelm = typeof me != 'string' ? me : document.getElementById(me);
 
  myelm.classList.toggle(style);
}

注意：确保同时传递第二个参数（样式）！

片段：

function toggle(me, style) {
  var myelm = typeof me != 'string' ? me : document.getElementById(me);
 
  myelm.classList.toggle(style);
}

.highlight { background: yellow }

<div id="otherelement">This is other element</div>

<p></p>

<div onclick="toggle(this, 'highlight');">toggle this</div>
<div onclick="toggle('otherelement', 'highlight');">toggle other element</div>

如何让函数判断是否应用于 "this" 或其他元素 ID

How to have a function tell whether to apply on "this" or other element ID

javascript

function

this