javascript - 如何通过点击img来增加box-shadow？

Question

我设置了代码，以便当用户单击 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();
  });

Answer 1

代码中的问题是，当您向变量添加 "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);
});