jQueryを使用してCSS値をパーセントでインクリメント

Question

ここでは、104個のアップボトム（Increment css top property using jquery）の回答に示されているように、CSS要素の％値をjQueryでインクリメントしようとしています。

私はこのフィドル（https://jsfiddle.net/twLxa3o7/）を使って遊んでいます。ボタンをクリックするたびに画像の明るさを10％下げるようになっていますが、機能していません。コードの主な行は$("#image-" + image_id + "").css("-webkit-filter", "brightness(-=10%)");です。

アイデア？

Answer 1

私はそれを動作させるためにあなたのフィドル更新しました：https://jsfiddle.net/1q3mtm1e/は

初期輝度がコードで宣言され、あなたがボタンをクリックすると機能は、データ・画像-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); 
}); 

Answer 2

あなたはなぜだろう"%"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
    var n = 0; 
 

 
    function darken_image(image_id) { 
 
    $("#image-" + image_id + "") 
 
     .css("-webkit-filter", "brightness(" + (n += 10) + "%)"); 
 
    console.log("n:", n) 
 
    return false; 
 
    } 
 
</script> 
 
<button type="button" onclick="darken_image(23)">+</button> 
 
<span id="image-23" style="border: 1px red dashed; display: block; position: relative; clear: both; -webkit-filter: brightness(100%);"> 
 
    <img src="https://assets.servedby-buysellads.com/p/manage/asset/id/29712"> 
 
</span>

jsfiddle https://jsfiddle.net/twLxa3o7/2/