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

Question

我设置了我的代码，以便当用户点击 img 时，框阴影会增加。但是，我的代码只增加了一次box-shadow，我不太明白为什么。我想这与 .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);
});