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

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

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

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

jQuery

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

Q&A

解決済

3回答

1348閲覧

jQueryからJavaScriptへの書き換え

06140614

総合スコア2

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2020/07/13 03:31

編集2020/07/13 03:48

#jqueryをjavascriptへ書き換えについて

下記jqueryをjavascriptへ書き換えを行いました。
jsにて下記エラーが表示されたのですが、どこが間違っているのかわからない状況になります。

大変恐縮ですが、プログラミングにつきまして
初心者のため何が違うのかなど詳しくご教示いただけると幸いです。

お手数おかけいたしますが、何卒よろしくお願いいたします。

参考サイトはこちらになります。

######エラー文:Uncaught SyntaxError: Unexpected identifier

jquery

1$("#tab1").click(moveToFirst); 2$("#tab2").click(moveToSecond); 3$("#tab3").click(moveToThird); 4$("#tab4").click(moveToFour); 5 6function moveToFirst() { 7 $("#slide").attr('class', 'move-to-first'); 8 $(".tab").attr('class', 'tab'); 9 $("#tab1").attr('class', 'tab selected'); 10} 11 12function moveToSecond() { 13 $("#slide").attr('class', 'move-to-second'); 14 $(".tab").attr('class', 'tab'); 15 $("#tab2").attr('class', 'tab selected'); 16} 17 18function moveToThird() { 19 $("#slide").attr('class', 'move-to-third'); 20 $(".tab").attr('class', 'tab'); 21 $("#tab3").attr('class', 'tab selected'); 22} 23 24function moveToFour() { 25 $("#slide").attr('class', 'move-to-four'); 26 $(".tab").attr('class', 'tab'); 27 $("#tab4").attr('class', 'tab selected'); 28}

↓上記jqueryを下記JavaScriptへ書き換えました

JavaScript

1document.getElementById("tab1").onclick = function() { 2 function moveToFirst() { 3 var content1 = document.getElementById("slide"); 4 content1.classList.add("move1"); 5 var tab1 = document.getElementById("tab1"); 6 tab1.classList.add("tab selected"); 7 } 8}; 9 10document.getElementById("tab2").onclick = function() { 11 function moveToSecond() { 12 var content2 = document.getElementById("slide"); 13 content2.classList.add("move2"); 14 var tab2 = document.getElementById("tab2"); 15 tab1.classList.add("tab selected"); 16 } 17}; 18 19document.getElementById("tab3").onclick = function() { 20 function moveToThird() { 21 var content3 = document.getElementById("slide"); 22 content3.classList.add("move3"); 23 var tab3 = document.getElementById("tab3"); 24 tab3.classList.add("tab selected"); 25 } 26}; 27 28document.getElementById("tab4").onclick = function() { 29 function moveToFour() { 30 var content4 = document.getElementById("slide"); 31 content4.classList.add("move4"); 32 var tab4 = document.getElementById("tab4"); 33 tab4.classList.add("tab selected"); 34 } 35}; 36

念の為、html cssも記載いたします

html

1<div id="wrap"> 2 <div id="tab1" class="tab selected">Tab 1</div> 3 <div id="tab2" class="tab">Tab 2</div> 4 <div id="tab3" class="tab">Tab 3</div> 5 <div id="tab4" class="tab">Tab 4</div> 6 <div id="container"> 7 <div id="slide" class=""> 8 <div id="first" class="box">Check this Out</div> 9 <div id="second" class="box">TAB TWO</div> 10 <div id="third" class="box">TAB THREE</div> 11 <div id="four" class="box">TAB FOUR</div> 12 </div> 13 </div> 14 </div>

css

1body, html { 2 margin: 0px; 3 padding: 0px; 4 width: 100%; 5 height:100%; 6 text-align: center; 7} 8 9#wrap { 10 width: 400px; 11 margin: 0 auto; 12 margin-top: 10px; 13} 14 15.tab { 16 height: 40px; 17 width: 100px; 18 border-bottom: 4px solid black; 19 line-height: 40px; 20 text-align: center; 21 font-size: 20pt; 22 float: left; 23 cursor: pointer; 24} 25 26.selected { 27 background-color: black; 28 color: white; 29 border: none; 30} 31 32#container { 33 position: relative; 34 width: 400px; 35 height: 200px; 36 overflow: hidden; 37 clear: left; 38} 39 40.box { 41 display: inline-block; 42 white-space: nowrap; 43 position: absolute; 44 width: 400px; 45 height: 200px; 46 47 line-height: 200px; 48 text-align: center; 49 font-size: 28pt; 50 cursor: pointer; 51} 52 53#first { 54 top: 0px; 55 left: 0px; 56} 57 58#second { 59 top: 0px; 60 left: 400px; 61} 62 63#third { 64 top: 0px; 65 left: 800px; 66} 67 68#four { 69 top: 0px; 70 left: 1200px; 71} 72 73#slide { 74 transition: transform 1s ease-in-out 0s; 75 -moz-transition: -moz-transform 1s ease-in-out 0s; 76 -webkit-transition: -webkit-transform 1s ease-in-out 0s; 77} 78 79.move-to-second { 80 transform: translateX(-400px); 81 -moz-transform: translateX(-400px); 82 -webkit-transform: translateX(-400px); 83} 84 85.move-to-third { 86 transform: translateX(-800px); 87 -moz-transform: translateX(-800px); 88 -webkit-transform: translateX(-800px); 89} 90 91.move-to-first { 92 transform: translateX(0px); 93 -moz-transform: translateX(0px); 94 -webkit-transform: translateX(0px); 95} 96 97.move-to-four { 98 transform: translateX(-1200px); 99 -moz-transform: translateX(-1200px); 100 -webkit-transform: translateX(-1200px); 101}

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

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

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

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

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

guest

回答3

0

どこが間違っているのかわからない状況になります

  1. asuchi0819さんが回答済みです

(イベントリスナの処理は、関数定義されているだけの無意味なコードになっている)。
ご質問のコードから4つ目だけを変えて例示しますが、全てのリスナを書き換えてください。
2. click イベントを定義する対象が tab1 しかありません。 tab2tab4も定義してください
3. リスナ内で適切なclassを指定できていません。
(例えば、move-to-thirdmove3 に書き換えるなら、CSSの書き換えが必要になり、手間なので、そのまま活用する)

javascript

1// 1. ご質問のコードから4つ目(表記忘れでしたので追記) 2document.getElementById("tab4").onclick = function(event) { 3 console.log( event.target ) 4 document.getElementById("slide").classList.add("move4"); 5 document.getElementById("tab4").classList.add("tab selected"); // 要修正と思います 6};

javascript

1// 3. 3つ目のタブに定義するイベントリスナの内容: 2$("#slide").attr('class', 'move-to-third'); // elm.className = 'move-to-third' 3$(".tab").attr('class', 'tab'); // .tab 全てを elm.className = 'tab' (selected を削除) 4$("#tab3").attr('class', 'tab selected'); // 改めて selected を加える

書き換えについて

一気に書き換えると、不慣れなAPIを利用したときに間違いに気づけない状態に陥りやすくなります。
static なHTMLで console.log() を仕込んだコードを、こまめに実行するのが良いと思います。

投稿2020/07/13 04:28

編集2020/07/13 05:06
AkitoshiManabe

総合スコア5432

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

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

06140614

2020/07/26 04:10

@AkitoshiManabe様 ご返答いただきありがとうございます! また、ご返答が遅れてしまい大変申し訳ございません。 お忙しい中、細かくご返答してくださり大変恐縮です。 今後は、console.log() で細かく確認し、対応いたします! この度はありがとうございました!
guest

0

ベストアンサー

そもそも元のjQueryがおかしい

  • attr()でclassをいじるのはやめるべき、addClassとかつかってください
  • 関数をバラバラにつくる意味がありません。機能をまとめて一つにしてください

投稿2020/07/13 03:42

yambejp

総合スコア114583

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

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

06140614

2020/07/13 03:54

コメントしたくださりありがとうございます! > そもそも元のjQueryがおかしい →jQueryがおかしいとご指摘ありがとうございます。  大変恐縮ですが、今回はjs文へのご指摘をいただけると幸いです。 お忙しい中、恐れ入りますが ご確認いただけますと幸いですm
yambejp

2020/07/13 04:05 編集

若干HTMLを調整していいならこう <script> window.addEventListener('DOMContentLoaded', ()=>{ document.querySelectorAll('.tab').forEach(x=>{ x.addEventListener('click',e=>{ const slideClass=document.querySelector('#slide').classList; slideClass.remove(...slideClass); slideClass.add("move-to-"+x.dataset["target"]); document.querySelector('.tab.selected').classList.remove('selected'); x.classList.add('selected'); }); }); }); </script> <div id="wrap"> <div id="tab1" class="tab selected" data-target="first">Tab 1</div> <div id="tab2" class="tab" data-target="second">Tab 2</div> <div id="tab3" class="tab" data-target="third">Tab 3</div> <div id="tab4" class="tab" data-target="four">Tab 4</div> <div id="container"> <div id="slide"> <div id="first" class="box">Check this Out</div> <div id="second" class="box">TAB TWO</div> <div id="third" class="box">TAB THREE</div> <div id="four" class="box">TAB FOUR</div> </div> </div> </div> HTML自体をいじれないなら、もうすこし工夫が必要
yambejp

2020/07/13 04:25

もとのままでもそんなに変わらずにいけたので追記 window.addEventListener('DOMContentLoaded', ()=>{ const target={tab1:"first",tab2:"second",tab3:"third",tab4:"four"}; document.querySelectorAll('.tab').forEach(x=>{ x.addEventListener('click',e=>{ const slideClass=document.querySelector('#slide').classList; slideClass.remove(...slideClass); slideClass.add("move-to-"+target[x.id]); document.querySelector('.tab.selected').classList.remove('selected'); x.classList.add('selected'); }); }); });
06140614

2020/07/16 05:58

@yambejp様 ご返答が遅れてしまい、大変申し訳ございません。 ご返答いただきありがとうございます。 また追記も大変嬉しく存じあげます! もう1点お聞きしてもよろしいでしょうか。 追記でコメントいただきました コードをローカルのIE11で確認したところJSが動きませんでした。 何か原因等につきまして、大変恐れく申し訳ないのですが ご教示いただくことは可能でしょうか。 何卒、よろしくお願いいたします。
06140614

2020/07/26 04:07

@yambejp様 ご返答いただきありがとうございます! お忙しい中ご返答いただき、お答えいただきありがとうございました。 また、ご返答が遅れてしまい大変申し訳ございませんでした。 ご返答いただいたコードでIE11は問題なく動作確認できました。 ベストアンサーとさせていただきます。 また、何かございましたらよろしくお願いいたします。
guest

0

2行目、11行目等が少なくとも違います。

functiom -> function

投稿2020/07/13 03:34

編集2020/07/13 03:35
kyoya0819

総合スコア10429

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

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

06140614

2020/07/13 03:42

コメントしてくださりありがとうございます! ご指摘いただいた箇所ですが、修正いたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問