javascript - 如何通过单击img来增加盒子阴影？

我已经设置了代码，这样当用户点击img时，框的阴影就会增加。但是，我的代码只增加了一次框阴影，我真的不明白为什么。我想这和.on（）有关，但我不确定为什么会这样。如果有人能提供一些见解，我将非常感激。

  var hshadow=10;
  var vshadow=10;
  function boostShadow() {
      hshadow= hshadow + 5;
      vshadow= vshadow + 5;
      hshadow=hshadow.toString() + "px ";
      vshadow=vshadow.toString() + "px ";
      $("img").css("box-shadow",hshadow + vshadow +"5px #565656");
  }

  $("img").on("click",function () {
      boostShadow();
  });

最佳答案

代码中的问题是，在向变量添加"px"时，将变量设置为字符串，这会阻止在下一次单击时进一步添加这些变量。请在下面尝试：

var hshadow = 10,
    vshadow = 10;
function boostShadow(image) {
    hshadow += 5;
    vshadow += 5;
    $(image).css("box-shadow",hshadow+"px " + vshadow+"px 5px #565656");
}

$("img").on("click",function () {
    // We pass the clicked image as a variable so only
    // that image's box-shadow is altered
    boostShadow(this);
});