loop gradient directions by clicking on a target

Question

I need to loop all of the eight gradient directions by clicking on a target, like this:

Answer 1

You can access the linear-gradient value with background-image.

$('.targ').on('click', function() {
  let direction = $(this).css('background-image').split(',')[0].slice(16);
  const gradientColors = $(this).css('background-image').split(',').slice(1);

  if (direction == 'to top') {
    direction = 'to top right'
  } else if (direction == 'to top right') {
    direction = 'to right'
  } else if (direction == 'to right') {
    direction = 'to right bottom'
  }

  $(this).css('background', 'linear-gradient(' + direction + ',' + gradientColors.join(','));
});

.targ {
  width: 54px;
  height: 54px;
  cursor: pointer;
}