javascript - 定义的变量 'within function brackets'在JS中不起作用

Question

我在 html 文件中有一些 div 元素:

<div id="pizza1" onclick="galery('pizza1')"></div>
<div id="pizza2" onclick="galery('pizza2')"></div>

我在外部 .js 文件中定义了函数，但它不起作用(这意味着它没有执行任何操作)。

function galery(var pizza) {
  document.getElementById(pizza).style.left = "10px;";
  document.getElementById(pizza).style.right = "10px;";
  document.getElementById(pizza).style.top = "10px;";
  document.getElementById(pizza).style.bottom = "10px;";
}

是否可以在 js 中做类似的事情？

Answer 1

检查您的控制台，您可以看到错误:

Uncaught SyntaxError: Unexpected token var

因此，您只需从函数参数中删除 var 即可:

function galery(var pizza) {

应该是:

function galery(pizza) {

注意:将位置更改为相对以查看更改。

希望这有帮助。

function galery(pizza) {
  var _this = document.getElementById(pizza);

  _this.style.left = "10px";
  _this.style.right = "10px";
  _this.style.top = "10px";
  _this.style.bottom = "10px";
  _this.style.position = "relative";
}

<div id="pizza1" onclick="galery('pizza1')">pizza 1</div>
<div id="pizza2" onclick="galery('pizza2')">pizza 2</div>

建议的解决方案使用addEventListener:

document.getElementById('pizza1').addEventListener("click", galery, false);
document.getElementById('pizza2').addEventListener("click", galery, false);

function galery() {
  this.style.left = "10px";
  this.style.right = "10px";
  this.style.top = "10px";
  this.style.bottom = "10px";
  this.style.position = "relative";
}

<div id="pizza1">pizza 1</div>
<div id="pizza2">pizza 2</div>