我正在尝试获取 value
或id
来自<a>
标记并在 JavaScript 函数中使用它。
function myFunction(qiizName, x) {
val = 1;
console.log("question number" + qiizName);
console.log("number question" + x.value);
console.log("number question" + x.id);
}
echo"<ul>";
echo "<li><a href='#home' class='active' >module</a></li>";
$i=0;
while ( $module_row = mysqli_fetch_array($module)) {
$total=$module_row['total_question'];
$id=$module_row['id'];
echo '<li><a href="javascript:myFunction(1,this)"
id="'.$total.'"
value="'.$total.'">\''.$module_row['nom'].'\' </a></li>';
$i++;
}
echo "</ul>";
例如:
<a href="javascript:myFunction(1,this)" id="2" value="2">cpp</a>
我希望得到 value
“2”和 id
“2”。
我在另一个项目中尝试了相同的代码并且它有效,但在这种情况下它根本不起作用。它在控制台中返回“未定义”。
出了什么问题?
最佳答案
<a>
element 没有value
属性,即无效的 HTML。仅表单字段具有 value
。您可以设置自定义 data-
attribute (如下所示)并在 JavaScript 中使用 element.dataset 访问它属性(property)。
此外,虽然现在为元素赋予 id
是有效的。以数字开头,这是不可取的,因为这可能会导致困惑和问题。
接下来,不要使用 href
用于嵌入 JavaScript 的属性(即 href="javascript:..."
),因为单击链接时启动一些 JavaScript 的技术实际上已经有 20 年历史了,而且非常过时。如果您确实想让用户单击一些内容并且不会导致导航,那么请勿使用 <a>
无论如何,因为它会让屏幕阅读器感到困惑,所以您需要取消 native click
行为,并且它在语义上是不正确的。几乎每个 HTML 元素都支持 click
事件,并且可以将样式设置为看起来像超链接。
此外,通过将 HTML 与 JavaScript 分开来遵循现代标准和最佳实践。这一切都从获取对您想要使用的元素的 JavaScript 引用开始,从那里您可以提取或修改您想要的任何方面,因此您实际上不需要“传递”任何内容数据到您的函数,因为该函数已经“绑定(bind)”到导致调用事件函数的元素,您可以使用 this
获取所需的数据。对象引用。
// Get a reference to the element you wish to work with:
var element = document.getElementById("two");
// Set up event handler in JavaScript, not in the href attribute of HTML
element.addEventListener("click", myFunction);
function myFunction() {
// You have access to all of the element's attributes and child content
// via the "this" object refence because the element that caused this
// function event handler to run gets bound to "this".
console.log("ID is: " + this.id);
console.log("data-value is: " + this.dataset.value);
console.log("Content is: " + this.textContent);
}
.clickable { cursor:pointer; user-select:none; text-decoration:underline; }
<div id="two" data-value="2" class="clickable">cpp</div>
关于javascript - 将属性从 `<a>` 传递给函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47945739/