javascript - 通过单击目标循环渐变方向

Question

我需要通过单击一个目标 来循环所有八个渐变方向，如下所示：

$('.targ').on('click', function() {
  let a = $(this).css('background').split(',')[0];
  console.log(a); // I need `to top` here
  if (a == 'to top') {
    a = 'to top right'
  } else if (a == 'to top right') {
    a = 'to right'
  } else if (a == 'to right') {
    a = 'to right bottom'
  }
  // and so on
  $(this).css('background', 'linear-gradient' + new_value);
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='targ' style='background: linear-gradient(to top,red,yellow)'></div>

有什么帮助吗？

标签： javascriptjqueryhtmlcss

Answer 1

除了背景，您可以获取样式属性。

$(this).attr('style')

它会返回"background: linear-gradient(to top,red,yellow)"。

然后你.slice(28)用来切出"background: linear-gradient("并.split(',')[0]获得方向。

let a = $(this).attr('style').slice(28).split(',')[0];