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

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

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

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

jQuery

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

Q&A

解決済

4回答

3596閲覧

jQueryで要素を変数に代入後、jQueryの関数が使えない

kobakazu

総合スコア9

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2018/07/14 03:24

編集2018/07/15 01:51

私(質問者のレベル

現在webpackを使いながらあるライブラリを使用中に起こった問題です。

普段はjQueryをあまりつかわない人間なのですが、dom操作などについては理解しているため調べながらなら普通に使えます。

問題

問題のコードはこちらです。

元のコード(動かない)

javascript

1this._elt = $(this.element) 2this._elt.removeClass("~~")

改変後のコード(動く)

javascript

1this._elt = this.element 2$(this._elt).removeClass("~~")

個人的に調べたこと

Chrome Dev Tools をつかってconsoleに出力したところ
変数に代入後のthis._eltthis.elementはきちんと同じ(当たり前ですが)
元のコードをconsole.log(this._elt)したところ

▼jQuery.fn.init [div.ol-overlay-container.ol-selectable] ▶0:div.ol-popup.default.ol-popup-top.ol-popup-left.hasclosebox.visible length:1 ▶__proto__:Object(0)

となりました。
また、__proto__を展開するとremoveClassは存在します。

回答していただきたいこと

元のコードと改変後のコードの違いと、動かない理由を教えていただきたいです。

よろしくおねがいします。

追記

問題が再現できないということですので該当ライブラリのコードのリンクを貼らさせていただきます
https://github.com/Viglino/ol-ext/blob/master/src/overlay/Popup.js#L62

追記2

console logでエラーを吐く場所はここです
https://github.com/Viglino/ol-ext/blob/master/src/overlay/Popup.js#L150

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

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

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

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

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

m.ts10806

2018/07/14 06:04

冒頭の挨拶のようなものは質問要件とは関係ないので個人的には不要と思います。
guest

回答4

0

脱jQuery .addClass() .hasClass() .removeClass() .toggleClass() | q-Azから。
単にメソッドが異なるからじゃないですか?removeClassはjQueryにしか無いですよ。

JS

1jQuery 2$("#main").removeClass("test") 3書き換え JavaScript 4document.getElementById("main").classList.remove("test")

投稿2018/07/14 03:37

編集2018/07/14 03:41
oikashinoa

総合スコア2826

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

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

kobakazu

2018/07/14 03:58

元のコードも $(this.element) のように$(jquery)でラップ?してあるので同じでは?と思ったのですが違うのですか?
oikashinoa

2018/07/14 04:05

早とちりですね。すみません。 ちゃんとPCで見てみます。
guest

0

自己解決

問題について理解はしていませんが、修正されたためこの質問は閉じさせていただきます。
解凍していただいた方々、どうもありがとうございました。

投稿2018/07/26 01:19

kobakazu

総合スコア9

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

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

0

普通に考えたら謎ですが、

this._elt = $(this.element) this._elt.removeClass("~~")

上記コードは2行続けて書いて思うように動かないということでしょうか?
それとも、使用ライブラリの下記のメソッドの実行結果がうまく動かないということでしょうか?

/** * Remove a CSS class to the popup. * @param {string} c class name. * @api stable */ ol_Overlay_Popup.prototype.removePopupClass = function (c) { this._elt.removeClass(c); };

投稿2018/07/14 17:55

keisukeh

総合スコア657

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

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

kobakazu

2018/07/15 01:52

追記2にリンクを貼らさせていただきましたが、具体的にはそこではないと思います。 ちなみに全ての this._eltを$(this._elt)にすると正常に動作します。
guest

0

動くサンプル:https://jsfiddle.net/1raeyvjf/


問題が再現しません。

投稿2018/07/14 04:05

kei344

総合スコア69366

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

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

kobakazu

2018/07/14 04:21

本当ですね... 自分もコード的には動くはずだと思っていたら動かなくて、質問させていただいたので... webpack側の問題なのでしょうかね?
kobakazu

2018/07/14 04:24

追記で該当コードのリンクを貼らさせていただきました。 もしよろしければお願いします
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問