Question

假设我下面有一个具有以下颜色的数组，当我使用jQuery单击某些内容时如何使颜色交替显示？

linear-gradient

我想将SELECT [FileName] , '20:00' AS [StartTime] , [ModifiedDate] , DATEDIFF(MINUTE, '20:00', CONVERT(TIME, [ModifiedDate])) AS 'BackupTime' --convert your modified date to time FROM [BackLogData];背景更改为每个数组的两种颜色，并且每次单击后颜色会顺序更改。

Answer 1

我没有将颜色硬编码到JS中，而是将它们存储为CSS类，并循环浏览这些类。由于separating concerns，这应该有助于使代码更易于维护。它还使您更加灵活，而不仅限于使用2色线性渐变。

// Since the styling is stored in the CSS,
// we just need a list of CSS classes we will
// cycle through. Editing this list is made
// simpler and less error prone than copy/pasting whole
// objects around.
var colors = [
  'orange',
  'purple',
  'blue',
  'hal',
  'rainbow',
  'cat',
];
var currentColor = 0;

// cache the #target element in a variable
// so we don't have to query the document
// every time we want to use it.
var target = jQuery('#target');

target.click(function (evt) {
  // increment our counter
  currentColor += 1;
  // use the remainder operator to roll back to 0
  // if we reached the end of the list
  currentColor %= colors.length;
  // update the element's class property,
  // removing the old class and adding the new class
  target.prop('class', colors[currentColor]);
});

.orange {
     background: linear-gradient(#FE6442, #F53A45);
}
.purple {
     background: linear-gradient(#B051F7, #9647F0);
}
.blue {
     background: linear-gradient(#006DD9, #005BB7);
}

.hal {
  background: radial-gradient(circle, rgba(255,0,0,1) 34%, rgba(0,0,0,1) 78%);
}

.rainbow {
  background: rgb(195,34,34);
  background: linear-gradient(54deg, rgba(195,34,34,1) 0%, rgba(200,198,35,1) 20%, rgba(54,206,36,1) 40%, rgba(37,76,203,1) 60%, rgba(161,88,166,1) 80%, rgba(253,45,45,1) 100%);
}

.cat {
  background: url("http://placekitten.com/200/125");
 }

#target {
  height: 125px;
  width: 200px;
  color: #fff;
  text-shadow: #000 1px 1px 1px;
  text-align: center;
  font-size: 2em;
  cursor: pointer;
  border: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="target" class="orange">Click me</button>

值得注意的是，.prop方法将清除元素上的所有class属性。如果您需要元素上的颜色类别以外的其他类别，则需要对我们删除的内容更具选择性。以下版本使用.removeClass()和.addClass()而非.prop()：

var colors = [
  'orange',
  'purple',
  'blue',
];
var currentColor = 0;

var target = jQuery('#target');

target.click(function (evt) {
  // remove the old class before incrementing
  target.removeClass(colors[currentColor]);
  currentColor += 1;
  currentColor %= colors.length;
  // add the new class
  target.addClass(colors[currentColor]);
});

.orange {
     background: linear-gradient(#FE6442, #F53A45);
}
.purple {
     background: linear-gradient(#B051F7, #9647F0);
}
.blue {
     background: linear-gradient(#006DD9, #005BB7);
}

.upsidedown {
  transform: rotate(0.5turn);
}

#target {
  height: 125px;
  width: 200px;
  color: #fff;
  text-shadow: #000 1px 1px 1px;
  text-align: center;
  font-size: 2em;
  cursor: pointer;
  border: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="target" class="orange upsidedown">Click me</button>

如果您不使用jQuery，则可以使用Element.classList的方法以类似的方式操作类。

更多阅读内容

Answer 2

类似这样的东西：

const colors = {
  orange: {
    color1: '#FE6442',
    color2: '#F53A45'
  },
  purple: {
    color1: '#B051F7',
    color2: '#9647F0'
  },
  blue: {
    color1: '#006DD9',
    color2: '#005BB7'
  },
};

let clickIndex = 1;
$('.grd-switcher').on('click', function() {
  $(this).css({'background': `linear-gradient(${Object.values(colors[Object.keys(colors)[clickIndex]]).join(', ')})`});
  
  if (clickIndex === Object.keys(colors).length-1) {
    clickIndex = 0;
  } else {
    clickIndex++;
  }
});

.grd-switcher {
  background: linear-gradient(#FE6442, #F53A45);
  width: 100px; height: 100px;
}
.grd-switcher:before {
  content: 'Click Me!';
  display: block;
  line-height: 100px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="grd-switcher">

</div>

但是，也就是说，您的colors变量不是数组而是对象，如果它实际上是数组，则将更易于处理，例如：

const colors = [
  // orange
  {
    color1: '#FE6442',
    color2: '#F53A45'
  },
  // purple
  {
    color1: '#B051F7',
    color2: '#9647F0'
  },
  // blue
  {
    color1: '#006DD9',
    color2: '#005BB7'
  },
];

let clickIndex = 1;
$('.grd-switcher').on('click', function() {
  $(this).css({'background': `linear-gradient(${Object.values(colors[clickIndex]).join(', ')})`});
  
  if (clickIndex === colors.length-1) {
    clickIndex = 0;
  } else {
    clickIndex++;
  }
});

.grd-switcher {
  background: linear-gradient(#FE6442, #F53A45);
  width: 100px; height: 100px;
}
.grd-switcher:before {
  content: 'Click Me!';
  display: block;
  line-height: 100px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="grd-switcher">

</div>

单击更改线性渐变背景

2 个答案:

更多阅读内容