Добавление уникального прослушивателя событий для каждого td в таблице - PullRequest
Новая
       7

Добавление уникального прослушивателя событий для каждого td в таблице

3 голосов
/ 21 июня 2020

Цель кода состоит в том, чтобы каждый блок отображал свой текст при наведении на него указателя мыши. Я хочу добавить к этому еще 30 блоков, но, похоже, я не могу найти способ сделать это без создания отдельного прослушивателя событий для каждого блока. Можно ли сделать это с помощью одного прослушивателя событий для наведения указателя мыши и наведения указателя мыши с использованием массивов и циклов?
Вот так выглядит код Javascript и HTML V 

var org = ["Anna", "Bob", "Caroline"]
var change = ["One", "Two", "Three"]

var headone = document.querySelector("#a");
headone.addEventListener('mouseover', function() {
  headone.textContent = change[0];
})
headone.addEventListener("mouseout", function() {
  headone.textContent = org[0];
})


var headtwo = document.querySelector("#b");
headtwo.addEventListener('mouseover', function() {
  headtwo.textContent = change[1];
})
headtwo.addEventListener("mouseout", function() {
  headtwo.textContent = org[1];
})

var headthree = document.querySelector("#c");
headthree.addEventListener('mouseover', function() {
  headthree.textContent = change[2];
})
headthree.addEventListener("mouseout", function() {
  headthree.textContent = org[2];
})
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>

  <style>
    table {
      width: 80%;
    }
    
    td {
      width: 20%;
      position: relative;
      box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      background-color: white;
    }
    
    td:after {
      content: '';
      display: block;
      margin-top: 100%;
    }
    
    td:hover {
      background-color: pink;
      box-shadow: 0px 4px 24px 5px rgba(129, 120, 255, 1);
    }
    
    body {
      background-color: lightblue;
    }
  </style>

</head>

<body>
  <table>
    <tr>
      <td id="a">Anna</td>
      <td id="b">Bob</td>
      <td id="c">Caroline</td>
    </tr>
  </table>
</body>
<script src="test.js"></script>

</html>

Можно ли каким-либо образом закодировать раздел Javascript, чтобы повысить эффективность использования массивов? Вместо того, чтобы создавать новый EventListener для каждого нового блока, который я добавляю в таблицу.

Ответы [ 4 ]

2 голосов
/ 21 июня 2020

Вы можете использовать своего рода индексацию, при которой идентификатор каждого элемента будет определять его организацию и изменять значение. Взгляните на следующий код: 

var org = ["Anna", "Bob", "Caroline"],
    change = ["One", "Two", "Three"];

var test = document.querySelectorAll('td');

// Loop to set id's and add eventlisteners 
for(let i = 0; i < test.length; i++){
    test[i].id = i;
    test[i].addEventListener('mouseover', () => {
        test[i].textContent = change[i];
    });
    test[i].addEventListener('mouseout', () => {
        test[i].textContent = org[i];
    });
}

Этот код работает так, как я думаю, вы хотите.

Однако этот фрагмент основан на том, в каком порядке они помещаются в код. Вы увидите, когда поиграетесь с ним :)

1 голос
/ 21 июня 2020 
give all td class of tds and then write the following code.


let tabs=document.querySelectorAll(".tds");
let i=0;
tabs.forEach(e=>{
    e.addEventListener('mouseover',function(){
        e.textContent=change[i];
    })
    e.addEventListener('mouseout',function(){
        e.textContent=org[i];
    })
    i++
})
1 голос
/ 21 июня 2020

Вы можете добавить class к своим td элементам, а затем использовать document.querySelectorAll() для возврата массива всех элементов с этим классом.

Затем вы можете использовать метод forEach() для применения изменяется сразу для всех. Вам просто нужно убедиться, что ваш массив change имеет такое же количество элементов, что и td элементы, которые вы отображаете на странице. 

var org = ["Anna", "Bob", "Caroline"]
var change = ["One", "Two", "Three"]

const refs = document.querySelectorAll(".box");

refs.forEach((ref, i) => {
    ref.addEventListener("mouseover", () => {
        ref.textContent = change[i]
    })

    ref.addEventListener("mouseout", () => {
        ref.textContent = org[i];
    })
})
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>

  <style>
    table {
      width: 80%;
    }
    
    td {
      width: 20%;
      position: relative;
      box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      background-color: white;
    }
    
    td:after {
      content: '';
      display: block;
      margin-top: 100%;
    }
    
    td:hover {
      background-color: pink;
      box-shadow: 0px 4px 24px 5px rgba(129, 120, 255, 1);
    }
    
    body {
      background-color: lightblue;
    }
  </style>

</head>

<body>
  <table>
    <tr>
      <td id="a" class="box">Anna</td>
      <td id="b" class="box">Bob</td>
      <td id="c" class="box">Caroline</td>
    </tr>
  </table>
</body>
<script src="test.js"></script>

</html>
1 голос
/ 21 июня 2020

Вы можете написать функцию, которая добавляет два прослушивателя событий. Затем я брал строку таблицы и перебирал ее дочерние элементы. Каждая итерация запускает функцию, которая добавляет прослушивателей событий. 

function addEventListeners(target, index) {
    target.addEventListener('mouseover', function() {
        target.textContent = change[index];
    });
    target.addEventListener("mouseout", function() {
        target.textContent = org[index];
    });
}

var trChilds = document.querySelector('tr').children;
for (let index = 0; index < trChilds.length; index++) {
    const element = trChilds[index];
    addEventListeners(element, index);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...