querySelectorAllで取得した配列の各要素ごとにマウスオーバーイベントを発火させたい（Javascript）

##querySelectorAllで取得した配列の各要素ごとにマウスオーバーイベントを発火させたい（Javascript）

以下のweb-skills__itemを配列に格納し、それらにマウスオーバーしたタイミングで、show-textというクラスを付与させたいのですが、思うように動きません。

どなたかご享受ください、お願いします、、、

HTML
1<div class="web-skills__items">
2    <div class="web-skills__item">
3       <p class="web-skills__item-title">HTML5/CSS3</p>
4       <span class="web-skills__item-icon fas fa-code"></span>
5    </div>
6    <div class="web-skills__item">
7       <p class="web-skills__item-title">Sass</p>
8       <span class="web-skills__item-icon fab fa-sass"></span>
9    </div>
10    <div class="web-skills__item">
11        <p class="web-skills__item-title">Javascript</p>
12        <span class="web-skills__item-icon fab fa-js"></span>
13    </div>
14    <div class="web-skills__item">
15         <p class="web-skills__item-title">PHP</p>
16         <span class="web-skills__item-icon fab fa-php"></span>
17    </div>
18</div>

Javascript
1document.addEventListener('DOMContentLoaded', function () {
2    const st = new showText();
3});
4class showText {
5    constructor() {
6        this.DOM = {};
7        this.DOM.items = document.querySelectorAll('.web-skills__item');
8        this._addEvent();
9    }
10
11    _toggle() {
12        this.DOM.item.classList.toggle('show-text');
13    }
14
15    _addEvent() {
16        this.DOM.items.forEach(item => this._toggle.bind(this));
17        console.log(item);
18    }
19}

AkitoshiManabe

2020/05/28 09:19

toggleClass() を使っていますが、 show-text を付与した後、何かしらの条件で show-text を取り除くのだと察します。もし取り除くのであれば、それはどのような条件でしょうか（わざわざ、JavaScriptを指定するのであれば、「再び、ホバーしたとき」といった条件も考えられます）。

行動規範の内容に同意します

回答4件

ベストアンサー

質問者さんのコードにはマウスオーバーしたタイミングで処理を実行させることを設定しているコードが存在しないので、マウスオーバーしたタイミングで何かが実行されることはありませんね。

以下のようなコードで「マウスオーバーしたタイミングで、show-textというクラスを付与させる」ことはできますが動きとして不自然なので、質問者さんの求めている動きは:hover疑似要素で実現できる事のような気がします。

html
1<html>
2<head>
3<script>
4document.addEventListener('DOMContentLoaded', function () {
5    document.querySelectorAll('.web-skills__item').forEach(el => {
6        el.addEventListener("mouseover", () => el.classList.toggle('show-text'));
7    });
8});
9</script>
10<style>
11.show-text { color:red }
12</style>
13</head>
14<body>
15<div class="web-skills__items">
16    <div class="web-skills__item">
17       <p class="web-skills__item-title">HTML5/CSS3</p>
18       <span class="web-skills__item-icon fas fa-code"></span>
19    </div>
20    <div class="web-skills__item">
21       <p class="web-skills__item-title">Sass</p>
22       <span class="web-skills__item-icon fab fa-sass"></span>
23    </div>
24    <div class="web-skills__item">
25        <p class="web-skills__item-title">Javascript</p>
26        <span class="web-skills__item-icon fab fa-js"></span>
27    </div>
28    <div class="web-skills__item">
29         <p class="web-skills__item-title">PHP</p>
30         <span class="web-skills__item-icon fab fa-php"></span>
31    </div>
32</div>
33</body>
34</html>

投稿2020/05/28 08:48

編集2020/05/28 08:48

ku__ra__ge

総合スコア4524

こういうことでしょうか？
イベントはこれから実装するのですよね？

js
1    _toggle() {
2        this.classList.toggle('show-text');
3    }
4
5    _addEvent() {
6        this.DOM.items.forEach(item => this._toggle.bind(item)());
7    }

私見ですが、わざわざthisを混乱させる必要はないと思いますよ。
このように書いた方がシンプルです。

js
1    _toggle(item) {
2        item.classList.toggle('show-text');
3    }
4
5    _addEvent() {
6        this.DOM.items.forEach(item => this._toggle(item));
7    }

投稿2020/05/28 08:50

Lhankor_Mhy

総合スコア36981

class showText から handleEvent メソッドを持ったオブジェクトも考えられます。

オブジェクトリテラルでインスタンスを想定すると以下の形。

javascript
1const showText = {
2  targetClass : "web-skills__item",
3  toggleClass : "show-text",
4  
5  handleEvent( event ) {
6    // ここに ShowText 特有のイベント処理を切り分けて実装
7    event.target.classList.toggle(this.toggleClass);
8    
9  },
10  attach() {
11    [...document.querySelectorAll("."+this.targetClass)]
12      .forEach(elm=>{
13        elm.addEventListener("mouseover", this)
14        //elm.addEventListener("mouseout", this)
15      });
16  },
17  detach() {
18    [...document.querySelectorAll("."+this.targetClass)]
19      .forEach(elm=>{
20        elm.removeEventListener("mouseover", this)
21        //elm.removeEventListener("mouseout", this)
22      });
23  }
24};
25
26document.addEventListener('DOMContentLoaded', () => {
27  showText.attach();
28});
29

※ :hover 疑似クラスを実現する場合、mouseoutも使う。

投稿2020/05/28 21:40

AkitoshiManabe

総合スコア5434

冗長に書くとこんな感じ

javascript
1window.addEventListener('DOMContentLoaded', ()=> {
2  document.querySelectorAll('.web-skills__item').forEach(x=>{
3    ["mouseover","mouseout"].forEach(y=>{
4      x.addEventListener(y,e=>{
5        e.target.classList.toggle('show-text');
6      });
7    });
8  });
9});