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

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

ただいまの
回答率

88.91%

jQueryからJavaScriptへの書き換え

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 287

06140614

score 2

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

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

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

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

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

エラー文:Uncaught SyntaxError: Unexpected identifier
$("#tab1").click(moveToFirst);
$("#tab2").click(moveToSecond);
$("#tab3").click(moveToThird);
$("#tab4").click(moveToFour);

function moveToFirst() {
    $("#slide").attr('class', 'move-to-first');
    $(".tab").attr('class', 'tab');
    $("#tab1").attr('class', 'tab selected');
}

function moveToSecond() {
    $("#slide").attr('class', 'move-to-second');
    $(".tab").attr('class', 'tab');
    $("#tab2").attr('class', 'tab selected');
}

function moveToThird() {
     $("#slide").attr('class', 'move-to-third');
    $(".tab").attr('class', 'tab');
    $("#tab3").attr('class', 'tab selected');
}

function moveToFour() {
     $("#slide").attr('class', 'move-to-four');
    $(".tab").attr('class', 'tab');
    $("#tab4").attr('class', 'tab selected');
}

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

document.getElementById("tab1").onclick = function() {
  function moveToFirst() {
    var content1 = document.getElementById("slide");
    content1.classList.add("move1");
    var tab1 =  document.getElementById("tab1");
    tab1.classList.add("tab selected");
  }
};

document.getElementById("tab2").onclick = function() {
  function moveToSecond() {
    var content2 = document.getElementById("slide");
    content2.classList.add("move2");
    var tab2 =  document.getElementById("tab2");
    tab1.classList.add("tab selected");
  }
};

document.getElementById("tab3").onclick = function() {
  function moveToThird() {
    var content3 = document.getElementById("slide");
    content3.classList.add("move3");
    var tab3 =  document.getElementById("tab3");
    tab3.classList.add("tab selected");
  }
};

document.getElementById("tab4").onclick = function() {
  function moveToFour() {
    var content4 = document.getElementById("slide");
    content4.classList.add("move4");
    var tab4 =  document.getElementById("tab4");
    tab4.classList.add("tab selected");
  }
};

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

<div id="wrap">
      <div id="tab1" class="tab selected">Tab 1</div>
      <div id="tab2" class="tab">Tab 2</div>
      <div id="tab3" class="tab">Tab 3</div>
      <div id="tab4" class="tab">Tab 4</div>
      <div id="container">
        <div id="slide" class="">
          <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>
body, html {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height:100%;
  text-align: center;
}

#wrap {
  width: 400px;
  margin: 0 auto;
  margin-top: 10px;
}

.tab {
    height: 40px;
    width: 100px;
    border-bottom: 4px solid black;
    line-height: 40px;
    text-align: center;
    font-size: 20pt;
    float: left;
    cursor: pointer;
}

.selected {
    background-color: black;
    color: white;
    border: none;
}

#container {
    position: relative;
    width: 400px;
    height: 200px;
    overflow: hidden;
    clear: left;
}

.box {
    display: inline-block;
    white-space: nowrap;
    position: absolute;
    width: 400px;
    height: 200px;

    line-height: 200px;
    text-align: center;
    font-size: 28pt;
    cursor: pointer;
}

#first {
    top: 0px;
    left: 0px;
}

#second {
    top: 0px;
    left: 400px;
}

#third {
    top: 0px;
    left: 800px;
}

#four {
    top: 0px;
    left: 1200px;
}

#slide {
    transition: transform 1s ease-in-out 0s;
    -moz-transition: -moz-transform 1s ease-in-out 0s;
    -webkit-transition: -webkit-transform 1s ease-in-out 0s;
}

.move-to-second {
    transform: translateX(-400px);
    -moz-transform: translateX(-400px);
    -webkit-transform: translateX(-400px);
}

.move-to-third {
    transform: translateX(-800px);
    -moz-transform: translateX(-800px);
    -webkit-transform: translateX(-800px);
}

.move-to-first {
    transform: translateX(0px);
    -moz-transform: translateX(0px);
    -webkit-transform: translateX(0px);    
}

.move-to-four {
    transform: translateX(-1200px);
    -moz-transform: translateX(-1200px);
    -webkit-transform: translateX(-1200px);    
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+4

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/16 14:58

    @yambejp様

    ご返答が遅れてしまい、大変申し訳ございません。
    ご返答いただきありがとうございます。
    また追記も大変嬉しく存じあげます!

    もう1点お聞きしてもよろしいでしょうか。

    追記でコメントいただきました
    コードをローカルのIE11で確認したところJSが動きませんでした。

    何か原因等につきまして、大変恐れく申し訳ないのですが
    ご教示いただくことは可能でしょうか。

    何卒、よろしくお願いいたします。

    キャンセル

  • 2020/07/16 15:27

    もはやcodepenとかがIE11に対応していないので微妙ですが

    https://codepen.io/yambejp/pen/BajqKER

    キャンセル

  • 2020/07/26 13:07

    @yambejp様

    ご返答いただきありがとうございます!

    お忙しい中ご返答いただき、お答えいただきありがとうございました。
    また、ご返答が遅れてしまい大変申し訳ございませんでした。

    ご返答いただいたコードでIE11は問題なく動作確認できました。

    ベストアンサーとさせていただきます。
    また、何かございましたらよろしくお願いいたします。

    キャンセル

+4

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

functiom -> function

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/13 12:42

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

    キャンセル

+4

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

  1. asuchi0819さんが回答済みです
    (イベントリスナの処理は、関数定義されているだけの無意味なコードになっている)。
    ご質問のコードから4つ目だけを変えて例示しますが、全てのリスナを書き換えてください。
  2. click イベントを定義する対象が tab1 しかありません。 tab2 〜 tab4も定義してください
  3. リスナ内で適切なclassを指定できていません。
    (例えば、move-to-third を move3 に書き換えるなら、CSSの書き換えが必要になり、手間なので、そのまま活用する)
// 1. ご質問のコードから4つ目(表記忘れでしたので追記)
document.getElementById("tab4").onclick = function(event) {
  console.log( event.target )
  document.getElementById("slide").classList.add("move4");
  document.getElementById("tab4").classList.add("tab selected"); // 要修正と思います
};
// 3. 3つ目のタブに定義するイベントリスナの内容:
$("#slide").attr('class', 'move-to-third'); // elm.className = 'move-to-third'
$(".tab").attr('class', 'tab'); // .tab 全てを elm.className = 'tab' (selected を削除)
$("#tab3").attr('class', 'tab selected'); // 改めて selected を加える

書き換えについて

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/26 13:10

    @AkitoshiManabe様

    ご返答いただきありがとうございます!
    また、ご返答が遅れてしまい大変申し訳ございません。

    お忙しい中、細かくご返答してくださり大変恐縮です。
    今後は、console.log() で細かく確認し、対応いたします!

    この度はありがとうございました!

    キャンセル

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

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る