主页 / 问题 / 1096117
Accepted
AleksandrM
Asked:2020-03-18 14:14:35 +0000 UTC2020-03-18 14:14:35 +0000 UTC

如何在 JS 中创建一个事件，以便只调用对象中的一个键？下次按下一个键

  • 772
let list = {
    'cat': 'кот',
    'dog': 'собака',
    'door': 'дверь'
};
let card = document.querySelector(".card");
card.onclick = function () {
    for (let key in list) {
        card.innerHTML = key + " ";
    }
}
card.onclick = function () {
    for (let key in list) {
        card.innerHTML = list[key];
    }
}
javascript

2 个回答

  1. Best Answer

    一个属性.onclick只能保存对一个函数的引用。您的第二个 onclick 会删除前一个。原则上，您不需要这样做 - 您需要将所有内容安排在一个函数中，但如果您有时想在代码中不同位置的一个按钮上添加几个相同的事件，请使用addEventListener. 马上习惯它并忘记 onclick 会很好。

    您需要收集一个对象值数组（*）并制作一个常规计数器变量，该变量在每次点击后都会增加并指向下一个元素。

    (*) 注意：没有什么能保证数组中的值与它们被添加到对象中的顺序相同。如果元素的顺序很重要，那么您最初应该只使用数组。

    let list = {
  cat: "кот",
  dog: "собака",
  door: "дверь",
};

list = Object.values(list); // ["кот", "собака", "дверь"]
let card = document.querySelector(".card");
let counter = 0;

card.addEventListener('click', function tmp() {
  card.textContent += (" " + list[ counter++ ]); 
  // Добавляем элемент из массива и одновременно увеличиваем counter на 1
  
  if( !list[ counter ] ) { // Если следующего элемента в массиве нет
    card.textContent += " Конец!";
    card.removeEventListener('click', tmp); // Удалить обработчик клика.
  }
});
    .card {
  padding: 5px;
  border: 4px solid orange;
  cursor: pointer;
}
    <div class="card">&gt;&gt; </div>

    Object.values(list);和

    let arr = [];
for( let key in list ) {
  arr.push( list[key] );
}

    ps http://learn.javascript.ru/ , https://developer.mozilla.org/en/docs/Learn

    • 1

  2. 作为一种选择，但是您需要替换键的名称。

    let list = {
  1: 'кот',
  2: 'собака',
  3: 'дверь'
};

let div = document.querySelectorAll('div');

let count = 1;

div[0].onclick = function a() {
  if (count > Object.keys(list).length) count = 1;
  console.log(list[count]);
  count++;
}
    <div class="a"> Кликни меня </div>

    • 0

相关问题