[MW WP Form] 複数のファイル選択項目の制御

Question

JavaScript初心者です。
MW WP Formを使用した状態で、ファイル選択のスタイルを変えなくてはいけなかったため、こちらの記事を参考にして実装しました。

【備忘録】MW WP Formのプラグインのファイル選択をカスタマイズする方法
https://blog.paper-cutting-art.com/blog032/

<div>
　<div class="mwBox-content upload-box">
　　<label>[mwform_image name="img-1" class="upload-1"]ファイルを選択</label>
　　<p class="js-upload-filename-1 file-name">選択されていません</p>
　</div>
　<div class="mwBox-content upload-box">
　　<label>[mwform_image name="img-2" class="upload-1"]ファイルを選択</label>
　　<p class="js-upload-filename-2 file-name">選択されていません</p>
　</div>
　<div class="mwBox-content upload-box">
　　<label>[mwform_image name="img-3" class="upload-1"]ファイルを選択</label>
　　<p class="js-upload-filename-3 file-name">選択されていません</p>
　</div>
</div>

$('.upload-1').on('change', function() {
    var file = $(this).prop('files')[0];
    $('.js-upload-filename-1').text(file.name);
});

しかし、今回ファイル選択項目は3つあり、このjQueryの書き方だと、一つの項目でアップロードすると全ての項目に反映されるようになってしまいます。

かといって、
$('.upload-2').on('change', function() {〜
$('.upload-3').on('change', function() {〜
と書くのもおかしいと思ったため、なにか他に簡潔にかける方法をご教授いただきたいです。
説明不足である場合、ご指摘いただけますと幸いです。
ご回答の程よろしくお願い致します。

Comments

[juner]

jQuery の closest() はご存じでしょうか？
https://api.jquery.com/closest/#closest-selector

一度 $(this).closest('.upload-box') で親に戻ってから find('.file-name') で探せば対象の要素を探したりできませんでしょうか？

[yomogi323]

> junerさん
そのようなメソッドがあるのですね。
下記のように書いてみたのですが、動きませんでした...
どのように書けば良いのかいまいちよくわかっておらず、恐れ入りますがご教授いただけないでしょうか。

（labelのクラスをupload-1からupload-fileに変更しました）
$('.upload-file').on('change', function() {
var file = $(this).prop('files')[0];
$(this).closest('.upload-box').find('.file-name').text(file.name);
});

[juner]

まず、 F12 から ソースにブレークポイントを張って、デバッグして 値を確認しながらやってみては如何でしょうか？

Answer 1

junerさんにご教授いただいたclosestメソッドを使用し、下記のように記述したら上手く動きました。
ありがとうございました！

<div>
                <div class="mwBox-content upload-box">
                    <label>[mwform_image name="img" class="upload-file"]ファイルを選択</label><p class="js-upload-filename file-name">選択されていません</p>
                </div>
                <div class="mwBox-content upload-box">
                    <label>[mwform_image name="img" class="upload-file"]ファイルを選択</label><p class="js-upload-filename file-name">選択されていません</p>
                </div>
                <div class="mwBox-content upload-box">
                    <label>[mwform_image name="img" class="upload-file"]ファイルを選択</label><p class="js-upload-filename file-name">選択されていません</p>
                </div>
            </div>

$('.upload-file').on('change', function() {
    var file = $(this).prop('files')[0];
    $(this).closest('.upload-box').find('.file-name').text(file.name);
});