Question

我正在使用列表创建“选择前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>

Answer 1

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/

希望获得帮助：）

javascript轻按不同背景

1 个答案: