質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1774閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2018/05/16 05:39

編集2018/05/16 06:40

前提・実現したいこと

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です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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の読み込ませる順番を入れ替えるなどして対応したいと思います。本当にありがとうございました。
guest

回答1

0

ベストアンサー

こうですか?

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>

投稿2018/05/16 10:03

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問