javascript - 使用jQuery将CSS值增加百分之一

我正在尝试使用jQuery来增加CSS元素的％值，如答案（此处的Increment css top property using jquery）有104个投票所概述。

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

有任何想法吗？

最佳答案

我已经更新了您的小提琴以使其起作用：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);
});