JavaScriptでbodyのクラスを取得し、他の要素をtext()で書き換えたい

前提・実現したいこと

bodyタグに他の処理で付随するクラス名を取得し、別の処理を行いたいと考えています。
具体的にはbodyのクラスを変化させるイベントが発生する箇所をクリックした際に、

<div class="title">で囲まれているh4の中を書き換える処理です。仕様上の問題で、h4タグにはIDやクラスは付けられません。

h4の中身が書き換わらない他、ifの中のコンソールも出力されないのですが原因が分かりません。
もしお分かりになる方がいらっしゃいましたら何卒よろしくお願い致します。

該当のソースコード

すみませんHTMLコードを追記致しました。

HTML
1<body>
2  <ul class="event"><!-- ここをクリックするとbodyにbody-classが付きます -->
3    <li><span>イベントが発生する箇所</span></li>
4  </ul>
5
6
7  <div class="card" style="display: none;"><!-- eventをクリックするとblockになります -->
8    <div class="title">
9      <h4>タイトル文言</h4><!-- 表示されたときにここの文言を書き換えたい -->
10    </div>
11    <div class="text">
12      内容
13    </div>
14  </div>
15</body>

JavaScript
1$('body').on('DOMSubtreeModified propertychange', function() {
2  $('.event').on('click', function() {
3    var x = $('body').attr('class');
4　　if ( x == 'body-class' ) {
5      $('.title h4').text('タイトル変更文言');
6    }
7  });
8});

試したこと

JavaScript
1$('body').on('DOMSubtreeModified propertychange', function() {
2  $('.event').on('click', function() {
3    var x = $('body').attr('class');
4    console.log(x);//ここならコンソールに出ますが空白です
5　　if ( x == 'body-class' ) {
6      console.log(x);//ここのコンソールは出ません
7      $('.title h4').text('タイトル変更文言');
8    }
9  });
10});

補足情報（FW/ツールのバージョンなど）

使用しているjQueryのバージョンは1.11.1です。

m.ts10806

2018/05/16 05:43

htmlもご提示ください。

Lhankor_Mhy

2018/05/16 06:50

当方では「ここならコンソールに出ますが空白です」が再現しませんでした。ご提示のコード、動作するんでしょうか。見た感じ、DOMSubtreeModified が起きないとclickイベントリスナが設定されず、click が起きないと DOMSubtreeModified が起きない、みたいな感じになっているような？

Lhankor_Mhy

2018/05/16 06:52

あ、「ここをクリックするとbodyにbody-classが付きます」の部分のコードはご提示いただいていないんですね？　把握しました。

Lhankor_Mhy

2018/05/16 07:01

ご提示されていない「ここをクリックするとbodyにbody-classが付きます」の部分のコードを当方で補足したところ、2回目のクリックで「タイトル変更文言」に変わりましたので、（イベントの処理に問題はありますが）問題は再現されませんでした。環境の問題か、ご提示いただけていない部分のコードに問題があるかもしれません。もう少し広い範囲のコードをご提示いただけますと、わかることがあるかもしれません。

退会済みユーザー

2018/05/16 07:48

情報不足になってしまいすみません。 bodyのクラスが変更になるコードの具体的な箇所が技術不足で割りだせず、提示することができませんでした。 Lhankor_Mhyさんの環境ではタイトルが変更されたと拝見し確認しました所、 bodyのクラスが変更になるコードが記載されているjs内でh4部分を書き換えていることが判明致しました。 Jsの読み込ませる順番を入れ替えるなどして対応したいと思います。本当にありがとうございました。

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

回答1件

ベストアンサー

こうですか？

css
1body.body-class{color:red}

javascript
1$(function(){
2  $('.event').on('click',function(){
3    $('body').addClass('body-class');
4    $('.card').show();
5    $('.title h4').text('タイトル変更文言');
6  });
7});

HTML
1<body>
2  <ul class="event"><!-- ここをクリックするとbodyにbody-classが付きます -->
3    <li><span>イベントが発生する箇所</span></li>
4  </ul>
5
6
7  <div class="card" style="display: none;"><!-- eventをクリックするとblockになります -->
8    <div class="title">
9      <h4>タイトル文言</h4><!-- 表示されたときにここの文言を書き換えたい -->
10    </div>
11    <div class="text">
12      内容
13    </div>
14  </div>
15</body>