2020年新年大赛！

Question

pridan

Asked:2020-04-17 06:29:46 +0000 UTC2020-04-17 06:29:46 +0000 UTC 2020-04-17 06:29:46 +0000 UTC

点击时从数组中获取特定值

772

有一个对象数组。在数组的基础上绘制一个表格

任务是通过点击单元格来获取颜色段的第一个和最后一个id值。如果点击如图所示，那么应该得到“c9”和“d31”的值。对于任何其他段相同。我试图在单击时在数组中定义一个元素，并从它来回使用，直到下一个单元格的颜色与当前单元格的颜色不匹配。然后我们写下id。但是有些东西不出来。那行不通，然后永恒的循环开始了。也许 while 通常是一个坏主意。我将不胜感激

    let arr = [
        {
            id: 'm2c',
            color: 'yellow'
        },
        {
            id: 'd1b',
            color: 'red'
        },
        {
            id: 'd6',
            color: 'red'
        },
        {
            id: 'd3',
            color: 'red'
        },
        {
            id: 'd4',
            color: 'red'
        },
        {
            id: 'd5',
            color: 'yellow'
        },
        {
            id: 'd6',
            color: 'yellow'
        },
        {
            id: 'd7',
            color: 'yellow'
        },
        {
            id: 'v1',
            color: 'yellow'
        },
        {
            id: 'c9',
            color: 'red'
        },
        {
            id: 'd1k',
            color: 'red'
        }, {
            id: 'd92',
            color: 'red'
        },
        {
            id: 'd12',
            color: 'red'
        },
        {
            id: 'd31',
            color: 'red'
        },
        {
            id: 'd14',
            color: 'yellow'
        },
        {
            id: 'd12',
            color: 'yellow'
        },
        {
            id: 'd45',
            color: 'yellow'
        },
        {
            id: 'd3',
            color: 'yellow'
        },
{
            id: 'd00',
            color: 'yellow'
        },
{
            id: 'd3o',
            color: 'yellow'
        },
    ];


    let ul = document.createElement('ul');
    let startId = document.createElement('span');
        let endId = document.createElement('span');
    arr.forEach(function (item) {
        let li = document.createElement('li');
        li.style.backgroundColor = item.color;
        li.innerHTML = item.id;
        ul.appendChild(li);

    });
    document.getElementById('container').appendChild(ul);
        document.getElementById('container').appendChild(startId );
            document.getElementById('container').appendChild(ul);


    document.querySelector('ul').addEventListener('click', e => {
        let content = e.target.innerHTML;

        let startIdValue;
        let endIdValue;

        arr.forEach(function (item, i, arr) {

            if (item.id === content) {

                while (arr[i--]) {

                    if (arr[i - 1].color !== item.color) {
                        startIdValue = item.id;
                        return
                    }
                }

                while (arr[i++]) {

                    if (arr[i + 1].color !== item.color) {
                        endIdValue = item.id;
                        return
                    }
                }

            }
        });
    });

    ul {
        width: 1000px;
        padding-left: 0;
        margin-left: 0;
        display: flex;

    }

    li {
        width: 50px;
        height: 50px;
        list-style-type: none;
        border: 1px solid #ccc;
    }

<div id="container">

</div>

3 个回答

Voted

inweid · Answer 1 · 2020-04-17T07:49:01Z

尝试按照以下思路思考：

document.querySelector('ul').addEventListener('click', e => {

    var content = e.target.innerHTML;
    var startIdValue;
    var endIdValue;

    // давай найдем для начала индекс элемента, на который ткнули
    var currentIndex = arr.findIndex(el => el.id === content);

    // затем найдем его цвет
    var currentColor = arr[currentIndex].color;

    // в цикле for началом отсчета зададим найденный индекс элемента
    // перебор будет осуществляться до тех пор, пока крайний цвет перестанет быть currentColor
    for (let i = currentIndex, arr[i].color == currentColor, i--) {
      // в конечном счете присвоится то, что нужно
      // здесь можешь выполнять какие-то дополнительные условия перед тем как присваивать, например найти цвет предыдущего айтема, если false - значит приехали - присваиваем
      startIdValue = arr[i].id
    }

    // аналогично здесь, только перебор по возрастанию
    for (let i = currentIndex, arr[i].color == currentColor, i++) {
      endIdValue = arr[i].id
    }
});

yar85 · Answer 2 · 2020-04-17T17:15:47Z

let arr = [
  { id: 'm2c', color: 'yellow' },
  { id: 'd1b', color: 'red' },
  { id: 'd6', color: 'red' },
  { id: 'd3', color: 'red' },
  { id: 'd4', color: 'red' },
  { id: 'd5', color: 'yellow' },
  { id: 'd6', color: 'yellow' },
  { id: 'd7', color: 'yellow' },
  { id: 'v1', color: 'yellow' },
  { id: 'c9', color: 'red' },
  { id: 'd1k', color: 'red' }, 
  { id: 'd92', color: 'red' },
  { id: 'd12', color: 'red' },
  { id: 'd31', color: 'red' },
  { id: 'd14', color: 'yellow' },
  { id: 'd12', color: 'yellow' },
  { id: 'd45', color: 'yellow' },
  { id: 'd3', color: 'yellow' },
  { id: 'd00', color: 'yellow' },
  { id: 'd3o', color: 'yellow' }
];

const list = document.createElement('ul'); 
list.innerHTML = arr.map(v => 
  `<li style="background-color: ${v.color};">${v.id}</li>`
).join(''); 
document.body.appendChild(list); 

list.addEventListener('click', e => {
  if (!(e.target instanceof HTMLLIElement)) return; 
  const targetClr = e.target.style.backgroundColor, 
        siblings  = [...e.target.parentElement.children]; 
  const checkColor = el => el && (el.style.backgroundColor === targetClr); 
  let left, right;
  left = right = siblings.indexOf(e.target); 
  while (checkColor(siblings[left - 1])) left--; 
  while (checkColor(siblings[right + 1])) right++; 
  console.clear(); 
  console.log(`Отрезок: ${siblings[left].textContent}..${siblings[right].textContent}`); 
});

ul { list-style: none; display: flex; padding: 0; }
li { flex: 0 0 50px; font: 1rem/50px sans-serif; text-align: center; box-shadow: 0 0 0 1px #ccc; }

teran · Answer 3 · 2020-04-17T17:39:32Z

下面的代码纯粹是一个搜索功能，在输入处没有接口（以免混淆代码） - 来自段的元素的 ID。在输出 - 一个段。如何在单元格中单击并获取 ID 以将其传递给函数，我想它已经知道了。

let arr = [
  { id: 'm2c', color: 'yellow' },
  { id: 'd1b', color: 'red' },
  { id: 'd6', color: 'red' },
  { id: 'd3', color: 'red' },
  { id: 'd4', color: 'red' },
  { id: 'd5', color: 'yellow' },
  { id: 'd6', color: 'yellow' },
  { id: 'd7', color: 'yellow' },
  { id: 'v1', color: 'yellow' },
  { id: 'c9', color: 'red' },
  { id: 'd1k', color: 'red' }, 
  { id: 'd92', color: 'red' },
  { id: 'd12', color: 'red' },
  { id: 'd31', color: 'red' },
  { id: 'd14', color: 'yellow' },
  { id: 'd12', color: 'yellow' },
  { id: 'd45', color: 'yellow' },
  { id: 'd3', color: 'yellow' },
  { id: 'd00', color: 'yellow' },
  { id: 'd3o', color: 'yellow' }
];



function findRange(needle){
    var l = r = idx = arr.findIndex( v => v.id == needle);
    var color = arr[idx].color;
    
    while(l && arr[l].color ==  color) l--;
    while(r < arr.length && arr[r].color == color) r++;
            
    return arr.slice(l+1,r);    
}

var result = findRange('d14');
console.log(result);

点击时从数组中获取特定值

根据浏览器窗口的大小调整背景图案的大小

理解for循环的执行逻辑

复制动态数组时出错（C++）

Or and If,elif,else 构造[重复]

如何构建支持 x64 的 APK

如何使按钮的输入宽度？

如何显示对象变量的名称？

如何循环一个函数？

LOWORD 宏有什么作用？

从字符串的开头删除直到并包括一个字符

点击时从数组中获取特定值

3 个回答

相关问题