Jquery 使用css/scss或js动态实现的颜色效果不透明度/渐变？

我正在着手建立我自己的动态手风琴，我希望每个标签看起来像图像。例如，每个都可以是带有div子项的标题标记或列表

手风琴将是动态的，用户可以随意添加更多的标签。顶层是同级元素，它们将有下拉的子元素（也是动态的）

我还没有找到一个解决方案，从第一个开始依次迭代每个兄弟姐妹的颜色，并在迭代时使颜色褪色或变亮

我自己的手风琴的想法是尽可能轻，这样就需要考虑。有谁能给我指出正确的方向

编辑

---

试图添加代码笔，但它不允许我。请参阅下面我的评论以获取链接。

好的，这是我最好的。如果颜色越来越浅，最终会变成白色，对吗？所以，你的手风琴应该有有限的标签，最后一个可能的标签是白色的

我可能会创建一个指定色调的数组（从黄色到白色），然后在每次添加新选项卡时遍历该数组，以查找下一个未使用的颜色。我会给你一些代码，但因为我不知道你是如何创作这个手风琴的，我不能做太多

最好的方法是使用Javascript创建新的选项卡，并从数组中为它们动态添加颜色

此外，这里还有一个链接，指向一个非常有用的网站，该网站可以生成颜色并显示该颜色的一系列阴影：

---

祝你好运

好的，这是我最好的了。如果颜色越来越浅，最终会变成白色，对吗？所以，你的手风琴应该有有限的标签，最后一个可能的标签是白色的

我可能会创建一个指定色调的数组（从黄色到白色），然后在每次添加新选项卡时遍历该数组，以查找下一个未使用的颜色。我会给你一些代码，但因为我不知道你是如何创作这个手风琴的，我不能做太多

最好的方法是使用Javascript创建新的选项卡，并从数组中为它们动态添加颜色

此外，这里还有一个链接，指向一个非常有用的网站，该网站可以生成颜色并显示该颜色的一系列阴影：

---

祝你好运

别以为，有一个简单（动态）的css解决方案

使用JS，您可以在hsl中创建一个起始颜色，获得每行的行数和亮度行数，并将其添加为样式；）

e、 g

然后在你的行上迭代，降低/增加亮度+添加到元素中

在这里，您可以阅读并使用hsl：

---

Cheerio:）

别想，有一个简单（动态）的css解决方案

使用JS，您可以在hsl中创建一个起始颜色，获得每行的行数和亮度行数，并将其添加为样式；）

e、 g

然后在你的行上迭代，降低/增加亮度+添加到元素中

在这里，您可以阅读并使用hsl：

---

Cheerio:）

使用Jquery，我的方法如下：

//First start with a string to store the color whitout alpha
var color="rgba(180,125,255,";

function repaint() {
  //Know how many tabs you have and which is the % increment you need
  var all = $('.tab').length,
      total = 10/all;

  //Iterate over all elements and set the new color based on Index
  $('.tab').each(function(i){
    var opacity = (total*(all-i))/10,
        newTone = color+opacity+")";
    $(this).css('background-color',newTone)
  })
}
repaint()

---

您仍然有许多方法可以改进此代码，例如简化颜色输入以接受十六进制和其他值

---

片段演示

var color=“rgba（180125255）”；
函数重新绘制（）{
var all=$（'.tab'）。长度，
总数=10/全部；
$（'.tab'）。每个（函数（i）{
变量不透明度=（总计*（全部-i））/10，
纽通=颜色+不透明度+”；
$（this.css（'background-color'，newTone）
})
}
重画
$（'button'）。在（'click'）上，函数（e）{
e、 预防默认值（）；
$（'body'）。附加（“”）
重画
})

.tab{
高度：40px；
}

添加选项卡

使用Jquery，我的方法如下：

//First start with a string to store the color whitout alpha
var color="rgba(180,125,255,";

function repaint() {
  //Know how many tabs you have and which is the % increment you need
  var all = $('.tab').length,
      total = 10/all;

  //Iterate over all elements and set the new color based on Index
  $('.tab').each(function(i){
    var opacity = (total*(all-i))/10,
        newTone = color+opacity+")";
    $(this).css('background-color',newTone)
  })
}
repaint()

---

您仍然有许多方法可以改进此代码，例如简化颜色输入以接受十六进制和其他值

---

片段演示

var color=“rgba（180125255）”；
函数重新绘制（）{
var all=$（'.tab'）。长度，
总数=10/全部；
$（'.tab'）。每个（函数（i）{
变量不透明度=（总计*（全部-i））/10，
纽通=颜色+不透明度+”；
$（this.css（'background-color'，newTone）
})
}
重画
$（'button'）。在（'click'）上，函数（e）{
e、 预防默认值（）；
$（'body'）。附加（“”）
重画
})

.tab{
高度：40px；
}

添加选项卡

我花了一分钟调试我的答案，所以我迟到了。但我还是想和大家分享

css html

---

我花了一分钟来调试我的答案，所以我迟到了。但我还是想和大家分享

css html

---

哎哟为什么投反对票？没有投反对票，但你的问题不包括你试图解决的问题。我只是花了近一个小时寻找任何与之无关的东西，结果什么也没有找到。这是一个艰难的搜索：“在元素上动态迭代颜色？？”。试试看，如果你发现了什么，我会留下深刻印象的。为什么投反对票？没有投反对票，但你的问题不包括你试图解决的问题。我只是花了近一个小时寻找任何与之无关的东西，结果什么也没有找到。这是一个艰难的搜索：“在元素上动态迭代颜色？？”。试一试，如果你发现了什么，我会给你留下深刻印象。它的动态有无限的表。这是我正在进行的工作的链接。目前静态：一旦颜色变为白色，您的标签将不可见。所以，也许你应该重新考虑你的概念？即使我减轻了百分之二，我会得到50阴影。足够了。这一点都不成问题。没错，这就是我的观点。在你的第一条评论中，你说它有无限的标签。但是，现在你说你只需要50个。我同意你的第二个评论。只需将这50种颜色组成一个数组，并使用JS添加选项卡并设置其样式。ok mate。只要检查一下我标记的答案上的钢笔就行了。很好。很有活力

ul {
  list-style: none;
}

.accordian li {
  padding: 1rem;
  background-color: yellow
}

<ul class="accordian">
  <li class="entry" for="entry in Accordian.entries"><a href="${entry.value}">${entry.key}</a></li>
</ul>

function addAlphaChannel(e, alpha) {
  const oldBGColor = window.getComputedStyle( $(e)[0] , null).getPropertyValue('background-color')
  let r,g,b;
  [r,g,b] = oldBGColor.match(/\d+/g)
  const newBGColor = `rgba(${r}, ${g}, ${b}, ${alpha})`

  $(e).css({ 'background-color': newBGColor })
}

const Accordian = {
  entries: {
      a: '/a',
    'and b': '/b'
  }
}

const Exposed = { Accordian }

$('[for]').each((idx,e) => {
  let key, collection, carr, template
    [key, collection] = $(e).attr('for').split(' in ')
  carr = collection.split('.')
  collection = carr.reduce((o,i)=>o[i], Exposed)

  template = $(e).html()
  let inner, i, cnt
  cnt = Object.entries(collection).length
  Object.entries(collection).forEach((k, ix) => {
    i = {key:k[0], value:k[1]}
    inner = template
        .replace('${'+key+'.key'+'}', i.key, 'g')
        .replace('${'+key+'.value'+'}', i.value, 'g')
    inner = $(e).clone().html(inner)
    $(inner).appendTo($(e).parent())
      .removeAttr('for')
    addAlphaChannel(inner, (cnt-ix)/cnt)
  })
  $(e).remove()
})