How can I increase a CSS property's value repeatedly on click?

Question

I want to add (in this case, decrease, technically) the value of an element each time a different element is clicked. What I have so far:

$("#trigger_heritage").click(function () {
  $(".heritage_content ul").css("margin-left", + -880);
  // So each time clicking shall move the .heritage_content ul-element 880px further left
});

It gets 880px far left, but only once. What I want is that this value gets increased each time the other element gets clicked.

How would I do that?

Answer 1

You can provide a string in the format -=[value] to the css() method which you can use to amend the current value. Try this:

$("#trigger_heritage").click(function () {
    $(".heritage_content ul").css("margin-left", '-=880');
});

Working example

Answer 2

设置一个变量，例如$marginLeft ，并在每次调用该函数时将其递增，然后设置margin-left:$marginLeft ...。

Answer 3

Here is a simple example:

$(document).ready(function() {
    var move = 0;
    $(".left").click(function () {
        move -= 25;
        $(".move").css("margin-left", move + "px");
    });
    $(".right").click(function () {
        move += 25;
        $(".move").css("margin-left", move + "px");
    });
})

Fiddle: https://jsfiddle.net/gjfjahjo/