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);
}

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

3 个答案: