我想在将鼠标悬停在表格行上时显示图像。我想知道如何将参数传递给 showCard 函数，以便使用 link = "http..."+ name 动态构建链接。当函数声明中没有任何内容时，为什么函数会获得 this 参数？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#cardImage {
position: fixed;
float: right;
top: 5%;
right: 3%;
width: 223px;
height: 310px;
}
</style>
</head>
<body>
<!-- This would be a table ganerated in another file -->
<!-- Each row of the table would show a different image when hovering over it -->
<?php
echo "<center><h2>Cardlist</h2></center>";
echo "<div><img id='cardImage' src='http://jpdefault.comuv.com/heirloom/gfx/card_back.jpg'</div>";
echo "<center><table><thead><tr><th>NAME</th></tr></thead><tbody>";
$name = "Llanowar Elves";
// I want to pass the variable which would be taken from a database $row['name'] to the javascript function
echo "<tr><td><center><span onmouseover='showCard(this)'>Load image</span></center></td></tr>";
echo "</tbody></table></center>"
?>
</body>
</html>
<script type="text/javascript">
function showCard() {
var image = document.getElementById('cardImage');
image.setAttribute('src', 'http://gatherer.wizards.com/Handlers/Image.ashx?&type=card&name=Llanowar Elves');
}
</script>
最佳答案
<span onmouseover="showCard(this)">Load image</span></center>
在这里，当您在span元素的onclick中传递参数“this”时，它将html dom元素传递给js函数。您可以这样引用它:
function showCard(el) {
//el being the html dom element.
var image = document.getElementById('cardImage');
image.setAttribute('src', 'http://gatherer.wizards.com/Handlers/Image.ashx?&type=card&name=Llanowar Elves');
}
如果您尝试将变量传递给函数，我建议将其附加为“数据”变量，并从代码中添加 onclick 函数。例如:
<span id="span1" data-val="somestuff" data-anotherval="someotherstuff">Load image</span>
<script>
var el = document.getElementById("span1");
var somestuff = el.dataset.somestuff;
var someotherstuff = el.dataset.someotherstuff;
var html = "http://" + somestuff + "/" + someotherstuff;
el.onmouseover= function() {
//do stuff
}
...
</script>
或者您可以直接从函数访问它们...例如:
<script>
var el = document.getElementById("span1");
el.onmouseover= function() {
var somestuff = el.dataset.somestuff;
var someotherstuff = el.dataset.someotherstuff;
var html = "http://" + somestuff + "/" + someotherstuff;
//do stuff
}
...
</script>
如果您也生成跨度，那么您可以将特定的类附加到每个跨度，并选择类并将函数附加到它们。例如:
<span class="someuniqueclassname" data-val="somestuff" data-anotherval="someotherstuff">Load image</span>
<span class="someuniqueclassname" data-val="somestuff2" data-anotherval="someotherstuff2">Load image</span>
<script>
var mouseoverfunction = function() {
var somestuff = this.dataset.somestuff;
var someotherstuff =this.dataset.someotherstuff;
var html = "http://" + somestuff + "/" + someotherstuff;
//do stuff
...
}
var elements = document.getElementsByClassName("span1");
for(var i = 0; i < elements.length; i++) {
var el = elements[i];
el.onmouseover = mouseoverfunction;
}
</script>
我之前忘记了“this”指的是函数调用的地方，也就是函数的“所有者”。在“mouseoverfunction”中它指的是元素...
关于javascript - 将鼠标悬停在使用 php 从数据库查询生成的表的一行上时，在固定位置显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52566904/