WPで取得した画像にjavascriptでクラス付与したいです

wordpressで、記事投稿画面で「メディアを追加する」から写真を３枚配置し、<?php the_content(); ?>のコードでその画像一覧を取得しています。

singlephp
1<div class="Works_info fadein">
2    <div class="Works_article_text">
3      <div class="Works_article_text_cat">
4        <span><?php the_field('works-cat'); ?></span>
5        <time datetime="<?php the_time('Y-m-d'); ?>">
6          <?php the_time('Y/m/d'); ?>
7        </time>
8      </div>
9      <a href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
10      <dl class="">
11        <dt>施行地域：</dt><dd><?php the_field('works-zone'); ?></dd><br>
12        <dt>面積：</dt><dd><?php the_field('works-area'); ?></dd><br>
13        <dt>スパン：</dt><dd><?php the_field('works-span'); ?></dd><br>
14        <dt>担当チーム：</dt><dd><?php the_field('works-team'); ?></dd>
15      </dl>
16    </div>
17    <div class="Works_article_images">
18      //ここで記事本文(つまり画像)を配置
19      <?php the_content(); ?>
20    </div>
21  </div>

このimgにclass付与したいのですが、javascriptで実現できていません。
（別の方法では可能ですが、今回javascript勉強のためこれで実現させたいといったところです）
以下scriptコードです。

mains
1$(function(){
2
3  //記事に配置した画像の取得（.alignnoneはすでに付与されている）
4　const luminousIgms = document.querySelectorAll('.alignnone');
5  //luminousというクラスを付与
6　luminousIgms.classList.add('luminous');
7
8　//一応alertかけたら「３」とうい数字が帰ってくるので、取得はできてるぽい
9　const count = luminousIgms.length;
10　alert(count);
11　
12  //画像拡大プラグインの実行コード（ここも発火しない）
13  new LuminousGallery(document.querySelectorAll('.luminous'));
14
15});

以上がコードですが、クラス付与がうまくいきません。
ちなみにdocument.querySelector('.alignnone')という書き方ですと、最初の画像にだけ上記コードが適用されます。
アドバイスよろしくお願いいたします。

ここから追記です。
最終的に実現したいことは、jQueryプラグの「luminous」という画像拡大プラグです。
luminousクラスがついた画像をクリックで拡大できるものです。
しかし、上記コードでluminousクラスをつけても、luminous実行コードが動きません。javascriptで動的にluminousつけた場合、その要素にluminous実行コードを適用させるにはどう書けば良いのでしょう？？

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

回答1件

ベストアンサー

document.querySelectorAllで取ってこられるものは、Allという名前の通り複数個あります。なので、1個単位にあるclassListなどをまとめてつけるには、ループで回して中身1個ずつを処理する必要があります。

const luminousIgms = document.querySelectorAll('.alignnone');

// その1 ふつうのforループ
for(let i = 0; i < luminousIgms.length; ++i) luminousIgms[i].classList.add('luminous');

// その2 Array.prototype.forEachを借りる
Array.prototype.forEach.call(luminousIgms, elem => elem.classList.add('luminous'));

// その3 最近のブラウザだとそのままforEachできる
luminousIgms.forEach(elem => elem.classList.add('luminous'));

投稿2019/05/20 01:33