🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

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

jQuery

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

Q&A

解決済

3回答

1012閲覧

JQueryと同じ処理をjavascriptに書き換えることは可能でしょうか?

sasayaka_p

総合スコア20

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2019/12/18 22:45

編集2019/12/19 05:36

下記コードの処理をJavascriptに書き換えたいですが中々うまく作動しません。
自分なりにJavascriotコードに書き換えてみましたが全く動作しないので、どの辺が原因なのかわかる方いらっしゃいましたら教えていただきたいです。

処理内容
triggerクラスをクリックしたら trigger, listのそれぞれのクラスにactive, openクラスを追加したり取り除いたりする処理です。

JQuery

1$(function() 2{ 3 $('#trigger').on('click', function() 4 { 5 if($(this).hasClass('active')) 6 { 7 $(this).removeClass('active'); 8 $('#list').removeClass('open'); 9 } 10 else 11 { 12 $(this).addClass('active'); 13 $('#list').addClass('open'); 14 } 15 }); 16});

Javascript

1function click() 2{ 3 document.getElementById('trigger').onclick = function() 4 { 5 var has_trigger = document.getElementById('trigger'); 6 var target1 = document.querySelector('list'); 7 8 if(has_trigger.classList.contains('active')) 9 { 10 target1.classList.remove('active'); 11 target2.classList.remove('open'); 12 } 13 else 14 { 15 target1.classList.add('active'); 16 target2.classList.add('open'); 17 } 18 } 19}

上記コード2点より
JQueryは正常に動作確認済みです。
また、Javascriptに関しましては、デベロッパーツールにてエラーは発生していませんが全く動作しません。

よろしくお願いします。

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

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

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

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

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

m.ts10806

2019/12/18 23:15 編集

コードはマークダウンのcode機能を利用してご提示ください。 また、htmlもご提示ください。 でないと「click()がどこからも呼ばれてないからでは?」という憶測でしか答えられません。
Lhankor_Mhy

2019/12/19 00:21

$('#list') がバニラの方で見当たらないようですが。
guest

回答3

0

javascript

1window.addEventListener('DOMContentLoaded', ()=>{ 2 document.querySelector('#trigger').addEventListener('click',e=>{ 3 e.target.classList.toggle('active'); 4 document.querySelector('#list').classList.toggle('open'); 5 }); 6});

投稿2019/12/19 00:22

yambejp

総合スコア116661

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

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

yambejp

2019/12/19 00:23

classListのtoggleはブラウザによっては実装されてません
guest

0

ベストアンサー

そのまま移すとこうなりますが、jQuery で行っているエラー対策などはありません。

JavaScript

1document.addEventListener('DOMContentLoaded', function() { 2 document.querySelector('#trigger').addEventListener('click', function() { 3 if (this.classList.contains('active')) { 4 this.classList.remove('active'); 5 document.querySelector('#list').classList.remove('open'); 6 } else { 7 this.classList.add('active'); 8 document.querySelector('#list').classList.add('open'); 9 } 10 }); 11});

提示コードを実行すると

Uncaught TypeError: Cannot read property 'classList' of null

となりますが、出てないならそもそも click() が実行されていないということです。急に出てきた menu_trigger/menu が不明ですね

投稿2019/12/19 00:58

x_x

総合スコア13749

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

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

0

jQueryではクラスをつけたり外したりしているのは $(this)$('#list') ですが、これらはVanilla JSではどこに行ったのですか?

js

1// ↓ $(function() { に相当 2window.addEventListener('DOMContentLoaded', function() { 3 // ↓ $('#trigger').on('click', function() { に相当 4 ducument.querySelector('#trigger').addEventListener('click', function() { 5 // ↓ $(this) に相当 6 const _this = event.currentTarget; 7 // ↓ $('#list') に相当 8 const ducument.querySelector('#list'); 9 // ↓ if($(this).hasClass('active')) { に相当 10 if(_this.classList.contains('active')) { 11 // ↓ .removeClass(className) に相当 12 _this.classList.remove('active'); 13 list.classList.remove('open'); 14 } else { 15 // ↓ .addClass(className) に相当 16 _this.classList.add('active'); 17 list.classList.add('open'); 18 } 19 }); 20});

投稿2019/12/19 00:26

編集2019/12/19 02:19
thyda.eiqau

総合スコア2982

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

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

yambejp

2019/12/19 00:28

jQueryの「$(function() {」処理は「DOMContentLoaded」的な 処理なのでどうせなならそこまで押さえてあげたほうが優しいです
thyda.eiqau

2019/12/19 01:01

なるほど、確かにそうですね。一番クリティカルなところは、 $(document).ready(handler) が謎の click() { ... } に置き換わっていることかもしれないですね。 そもそも .ready() すべきかどうか ( ≒ DOMContentLoaded をリスンすべきかどうか) はコード全体の提示がないとなんとも言えないですね。 <script /> が </body> の直前にあるのであればリスンしなくてもいいし、コード中の他の箇所でもリスンしている (DOMContentLoaded に複数のリスナがある) のであれば、別のバグを誘発する可能性があるのでここではリスンしないべきで、集約するように誘導したほうがよいですね。
yambejp

2019/12/19 01:10

そんなに難しく考えずともjqueryとjsを一致させる命題なのだから document.getElementById('trigger')から始めるなら jQueryの「$(function() {」を取ればいいだけです。
thyda.eiqau

2019/12/19 01:24

はい、そこは全く同意見です。コードの修正は携帯からではしんどいので端末を触れるときに見ておきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問