Как использовать это в JavaScript?

В jQuery мы используем:

$("p").click(function(){$(this).hide();});

В приведенном выше утверждении this очень важно, поскольку он скрывает только тот элемент p, на который мы нажимаем. Но вместо этого, если мы используем "p" в месте this, он скроет все элементы p при нажатии любого из элементов p.

Мне было интересно, есть ли способ генерировать тот же эффект с помощью JavaScript. Я пробовал:

document.getElementsByTagName("p").onclick = function(){this.style.display:none;}

document.getElementsByTagName("p").onclick = function(){document.getElementsByTagName(this).style.display:none;}

Но ничего из этого не работает.

Ответы

Ответ 1

Вам нужно выполнить итерацию по каждому элементу, а затем использовать addEventListener для присоединения к нему события:

var allP = document.getElementsByTagName("p");
for(i=0; i< allP.length; i++) {
    allP[i].addEventListener('click', function () {
      this.style.display = "none";
    });
}

Рабочий демонстрационный пример

Ответ 2

Как Алекс написал в комментариях:

Мне было интересно, есть ли способ генерировать тот же эффект с помощью JavaScript.

Нет, он работает только с jQuery, который использует темную магию.

jQuery неправильно использует this. Фактически он должен использоваться только в классах, а не в обратных вызовах.

Чтобы добиться такого же эффекта с помощью встроенного DOM:

Используйте document.querySelectorAll(), чтобы выбрать все элементы <p>.
Преобразуйте результат (NodeList) в массив, используя Array.from().
Вызов метода forEach() для выполнения функции для всех элементов.
Назначьте прослушиватель событий click для каждого элемента, используя метод addEventListener().
Наконец, внутри прослушивателя событий присвойте 'none' в el.style.display, чтобы скрыть элемент.

Демо-версия

Array.from(document.querySelectorAll("p"))
  .forEach(el => el.addEventListener('click', () => el.style.display = 'none'))

<p>Try clicking any of the paragraphs.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla purus metus, ullamcorper tempus augue interdum, efficitur vulputate lectus.</p>
<p>Vestibulum ullamcorper ultrices egestas.</p>
<p>Pellentesque volutpat, est ut convallis interdum, elit metus dapibus ex, non consectetur sem est et felis.</p>

Ответ 3

Шаг1: Получить все абзацы

Шаг 2: Прикрепите элемент clickListener к каждому элементу в параграфах

<html>
<head><title>Test</title></head>

<body>
    <p>This is a paragraph</p>

    <p>This is another paragraph</p>
</body>

<script type="text/javascript">

    function paragraphsClickHandler() {
        this.style.display = "none";
    }

    var paragraphs = document.getElementsByTagName("p");
    var i;

    for(i=0; i<paragraphs.length; i++)
        paragraphs[i].addEventListener("click", paragraphsClickHandler);


</script>
</html>

Ответ 4

Метод document.getElementByTagName не существует.

Вместо этого вы должны использовать document.getElement**s**ByTagName, который возвращает коллекцию:

document.getElementsByTagName("p")[0].onclick = function(){
    this.style.display= "none";
}

Или используйте это для одного и того же примера $("p"):

var elems = document.getElementsByTagName("p");
for(var i = 0; i < elems.length; i++){
    elems[i].onclick = function(){
        this.style.display= "none";
    }
}

Ответ 5

Если вы предпочитаете функции стрелок или не можете доверять this по какой-либо причине, вы можете вместо e.currentTarget:

const elems = document.getElementsByTagName("p");
const handleClick = e => console.log(e.currentTarget); //logs the clicked element

for (let i = 0; i < elems.length; i++) {
  elems[i].addEventListener('click', handleClick);
}

Ответ 6

document.getElementsByTagName( "p" ) возвращает коллекцию. Вам необходимо выполнить итерацию и привязать событие к каждому элементу как:

Array.prototype.slice.call(document.getElementsByTagName("p"))
                     .forEach(function(element) {
                                element.onclick = function() {
                                 element.style.display = 'none';
                                }
                      });

Ответ 7

Поскольку вы используете getElementsByTagName, он даст объект массива, а не один элемент, поэтому вам нужно перебрать его в цикле и связать событие click с каждым элементом, как показано ниже:

var domLength = document.getElementsByName('p').length;
for (var i=0; i<domLength; i++) {
    document.getElementsByName('p')[i].style.display = none;
}

Ответ 8

 var bubblingToEle = function (target, type, value) {
        while(target){
            switch (type){
                case 'nodeName':
                    if(target.nodeName === value){
                        return target;
                    }
                    break;
                default :
                    break;
            }
            target = target.parentNode;
            if(target.nodeName === 'HTML'){
                break;
            }
        }
        return null;
    }
    document.body.addEventListener('click', function (e) {
        var target = e.target,
            isPTag = bubblingToEle(target, 'nodeName', 'P');

        if(isPTag){
            isPTag.style.display = 'none';
        }
    })

Я думаю, что это лучше, не нужно связывать много слушателей.