javascript - 使用 jQuery 按百分比增加 CSS 值

Question

我正在尝试使用 jQuery 增加 CSS 元素的 % 值，正如答案中概述的那样，这里有 104 个赞成票 (Increment css top property using jquery)。

我创建了这个 fiddle (https://jsfiddle.net/twLxa3o7/) 来玩。每次单击按钮时，它应该将图像的亮度降低 10%，但它不起作用。主要代码行是 $("#image-" + image_id + "").css("-webkit-filter", "brightness(-=10%)"); .

有什么想法吗？

Answer 1

我已经更新了你的 fiddle 以使其工作:https://jsfiddle.net/1q3mtm1e/

初始亮度在代码中声明，每当您单击按钮时，该函数都会从按钮上的 data-image-id 属性中获取图像 ID。然后它将从初始亮度中减去 10% 并应用新的亮度。

var brightness = 50;

function darkenImage(imageId, brightness) {
    $("#image-" + imageId + "").css("-webkit-filter", "brightness(" + brightness + "%");
}

$(".button-class-here").on( "click", function() {
    var imageId = $(this).data("image-id");
    brightness -= 10;
    darkenImage(imageId, brightness);
});