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);
});

如何通过点击img来增加框阴影？

1 个答案: