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

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

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

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

jQuery

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

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Q&A

解決済

2回答

604閲覧

jQueryでプロパティ指定(data属性)がうまくいかない

moko888

総合スコア20

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

jQuery

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

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

0グッド

1クリップ

投稿2020/02/09 07:06

編集2020/02/11 02:18

現在node.jsでpug・sass・jqueryを利用し、サイトの模写をしています。

ボタンクリック後、グローバルメニューを表示するようにしたいのですが、data属性をプロパティ指定するとうまくいきません。
直接指定した場合は、きちんと反応するようです。

どなたか解決方法をご存知の方がいましたら、ご回答よろしくお願い致します。

javascript

1import $ from 'jquery'; 2 3let trigger = {}; 4trigger = { 5 spmenu: $('[data-trigger-spmenu]'), 6}; 7 8let target = {}; 9target = { 10 spmenu: $('[data-target-spmenu]'), 11}; 12 13const spMenuEvt = () => { 14 //クリック反応なし 15 trigger.spmenu.on('click', () => { 16 console.log("success"); 17 $('[data-target-spmenu]').toggleClass('is-active'); 18 }) 19 //クリック反応あり 20 $('[data-trigger-spmenu]').on('click', () => { 21 console.log("success"); 22 $('[data-target-spmenu]').toggleClass('is-active'); 23 }); 24}; 25 26$(function () { 27 spMenuEvt(); 28});

pug

1//ボタン部分(クリック後、is-activeクラスを付与) 2.l-spMenu-btn(data-trigger-spmenu="trigger") 3    ・ 4    ・ 5    ・ 6 7//表示部分(is-activeクラスを追加することで表示) 8.l-spMenu-groval(data-target-spmenu="target") 9    ・ 10    ・ 11    ・

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

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

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

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

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

miyabi_takatsuk

2020/02/09 07:12 編集

質問タグにNode.jsとあり、 import文にて、jQueryを読み込んでおりますが、なにか、フロントエンドフレームワークをお使いですか? それならば、そのフレームワークを使用していることを質問に記載することと、質問タグに追加いただかないと、回答は得られないかと。 また、そうであってもそうでなくても、HTMLの掲示もしてください。 JavaScriptだけでは状況が見えません。
moko888

2020/02/09 07:18

情報不足ですみません。質問修正しました。
guest

回答2

0

ベストアンサー

$('[data-trigger-spmenu]')は「そのコードが書かれた位置で読み込める要素」を保持します。ロードが終わっていない場所で定義しても何も持ちません。

js

1let trigger = {}; 2let target = {}; 3$(function () { // ← これの意味を調べてみましょう 4 trigger = { 5 spmenu: $('[data-trigger-spmenu]'), 6 }; 7 target = { 8 spmenu: $('[data-target-spmenu]'), 9 }; 10 spMenuEvt(); 11});

投稿2020/02/11 02:27

kei344

総合スコア69366

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

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

moko888

2020/02/11 03:00

data属性は「そのコードが書かれた位置で読み込める要素」なのですね...知識不足でした。 jsファイルの読み込みを、headからbodyの最後尾に変更することで解決しました。本当にありがとうございます!
guest

0

jsファイルの読み込みを、headからbodyの最後尾に変更することで解決しました。

投稿2020/02/11 03:00

moko888

総合スコア20

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問