如何在onclick函数中将元素id用作JS函数参数？

Question

我试图将我的锚标签用作单击时运行JS函数的按钮。

HTML-

<a  class="ghost-button-transition" href="#" onclick="navforward(about)" style="margin-right:5px;">About me</a>

JS-

function navforward(name){
  var str = "#"+String(name);
  $("#intro").fadeOut(1000).delay(1500);
  $(str).fadeIn(1000);
}

每当我点击<a>标记时，控制台中都会出现以下错误-

错误：语法错误，无法识别的表达式：＃[object HTMLDivElement]

现在，我知道发生了这种情况，因为我的navforward函数将name参数视为一个对象，因此无法真正将其用作调用相应HTML元素的句柄。 但是，即使将参数转换为字符串后，为什么它仍然不起作用？

我也onclick="navforward("about")和onclick="navforward("#about")但它们也给出了错误。

我该如何工作？

Answer 1

您的about对象是一个HTMLDivElement 。

只需使用其id属性，而不是将其转换为String即可：

function navforward(name){
  let str = "#"+name.id;
  $("#intro").fadeOut(1000).delay(1500);
  $(str).fadeIn(1000);
}

---

正如@Satpal在注释中指出的那样，您可以直接在jQuery选择器中直接使用about对象：

function navforward(name){
  $("#intro").fadeOut(1000).delay(1500);
  $(name).fadeIn(1000);
}

Answer 2

作为字符串传递为：

HTML：

<a class="ghost-button-transition" href="#" onclick="navforward('about')" style="margin-right:5px;">About me</a>

JS：

function navforward(name){
  var str = "#"+name;
  $("#intro").fadeOut(1000).delay(1500);
  $(str).fadeIn(1000);
}

Answer 3

试试这个。 如果在方法中传递this对象，则可以访问整个DOM元素。

<a id="about" class="ghost-button-transition" href="#" onclick="navforward(this)" style="margin-right:5px;">About me</a>

function navforward(obj){
  $("#" + obj.id).fadeOut(1000).delay(1500).fadeIn(1000);
}