时间戳

首页 > 解决方案 > javascript不同的背景点击

javascript - javascript不同的背景点击

问题描述

我正在使用列表来创建“选择前 3 名”，并且我正在使用 javascript 来收集选择并列出它们。但是，我想更改每个选择的背景，具体取决于它们何时被选中。

第一次选择 -> 绿色背景
第二次选择 -> 黄色背景
第三次选择 -> 红色背景

JavaScript：

events: {
    'tap #achieveList li': "makeSelection"
  },

  makeSelection: function(e) {
    var radioBtn = e.target;
    var selected = this.el.getElementsByClassName('selected');

    if (radioBtn) {
      if (radioBtn.classList.contains('selected')) {
        radioBtn.classList.remove('selected');
      } else if (selected.length < 3) {
        radioBtn.classList.add('selected');
      }
      this.monitorSelections(selected);
    }
  },
  monitorSelections: function(selected) {
    if (!selected) return;

    var selection = [];

    for (var i = 0; i < selected.length; i++) {
      selection.push(selected[i].innerHTML);
    };

    ag.submit.data({
      label: "This is top 3",
      category: "User input",
      value: selection.join(','),
      valueType: "list",
      path: app.getPath(),
      unique: true
    });

  }

HTML：

<div class="interactive-block">
  <ul id="achieveList">
    <li>More engagements</li>
    <li>Cost efficiencies</li>
    <li>Better access</li>
    <li>Higher customer value/satisfaction</li>
    <li>Become more digital</li>
    <li>Better customer insights</li>
  </ul>
</div>

标签： javascriptcss

解决方案

A）如果我理解你，你不需要图书馆：

let arr = []

const $$li = document.querySelectorAll('li')
$$li.forEach($li => $li.onclick = () => {
  // Remove classes
  $$li.forEach($li => $li.className = '')
  // Add clicked if not included
  if (!arr.includes($li)) arr.unshift($li)
  // No more than 3
  if (arr.length > 3) arr.pop()
  // Set classes
  arr.forEach(($li, i) => $li.classList.add(`bg${i + 1}`))
})

https://jsfiddle.net/my2tw36d/

使用上面链接的示例单击/点击您的列表项以检查这是否是您要查找的内容。

B）阅读您的评论后，您可以轻松地从我之前的示例中更改 2 个单词。使用反转数组，我们不需要更改我们设置 CSS 类的方式。

// Add selection if not included
if (!arr.includes($li)) arr.push($li)
// No more than 3
if (arr.length > 3) arr.shift()

https://jsfiddle.net/unatfyo5/

C）如果你想在 3 次选择后阻止，那么你需要这个：

if (!arr.includes($li) && arr.length < 3) arr.unshift($li)

https://jsfiddle.net/stLghxor/

希望这有帮助:)

推荐阅读