\r\n\r\n``````html\r\n
\r\n\t\r\n
\r\n```\r\n\r\n### 試したこと\r\n\r\nローカルで見たりサーバに上げてみたり、クラスではなくIDにしてみたり、クラスを複数ではなく1つだけ指定してみたりしました。またremoveではなく逆にaddで480以下を指定してみましたが、うまくいきませんでした。\r\n\r\n### 補足情報(FW/ツールのバージョンなど)\r\n\r\njavascriptは直接headに入れています。","answerCount":1,"upvoteCount":0,"datePublished":"2021-03-01T10:13:49.481Z","dateModified":"2022-01-12T10:55:45.698Z","suggestedAnswer":[{"@type":"Answer","text":"`removeClass`の指定方法に問題があるのではないでしょうか。\r\n\r\n【.removeClass() | jQuery API Documentation】\r\n[https://api.jquery.com/removeClass/](https://api.jquery.com/removeClass/)\r\n\r\n【.removeClass() | jQuery UI 1.10 日本語リファレンス | js STUDIO】\r\n[http://js.studio-kingdom.com/jqueryui/method_overrides/remove_class](http://js.studio-kingdom.com/jqueryui/method_overrides/remove_class)\r\n> マッチした要素セットに削除したいclass名を、1つまたは複数の場合はスペース区切りで指定します。","dateModified":"2021-03-02T01:33:35.328Z","datePublished":"2021-03-02T01:33:35.328Z","upvoteCount":0,"url":"https://teratail.com/questions/325381#reply-451064","comment":[{"@type":"Comment","text":"早速丁寧なご回答いただきありがとうございます。いただいたサイトを参考に以下のようにスペース区切りにしいてみましたが変化がありませんでした・・もう少しいろいろ試してみたいと思います。\r\n$(\".pc\").removeClass(\"fade-in fade-in-up fade-in-left scroll-in\");","datePublished":"2021-03-02T06:10:58.688Z","dateModified":"2021-03-02T06:10:58.688Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","url":"https://teratail.com"},{"@type":"ListItem","position":2,"name":"JavaScriptに関する質問","url":"https://teratail.com/tags/JavaScript"},{"@type":"ListItem","position":3,"name":"JavaScript","url":"https://teratail.com/tags/JavaScript"}]}}}
質問するログイン新規登録
JavaScript

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

Q&A

1回答

528閲覧

ウィンドウサイズに応じてクラスを削除

MYamasa

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2021/03/01 10:13

0

0

前提・実現したいこと

ウィンドウのサイズが480以上になったらスクロールしてフェードインするクラス(fade-in,fade-in-up,fade-in-left,scroll-in)を削除したいのですがうまくいきません。原因がわかればご教示いただけますと助かります。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

javascript

1<script type="text/javascript"> 2 $(window).resize(function() { 3 var x = $(window).width(); 4 var y = 480; 5 if (x >= y) { 6 $('.pc').removeClass('fade-in,fade-in-up,fade-in-left,scroll-in'); 7 } 8 }); 9 </script> 10 11``````html 12<article class="fade-in fade-in-up pc"> 13 <ul> 14 <li><a href="section02.html">○○○○</a></li> 15 <li><a href="section02.html"><img src="../images/02.svg" /></a></li> 16 <li>○○○○○○○○</li> 17 <li class="fade-in fade-in-left pc"><a href="section02.html">more</a></li> 18 </ul> 19</article>

試したこと

ローカルで見たりサーバに上げてみたり、クラスではなくIDにしてみたり、クラスを複数ではなく1つだけ指定してみたりしました。またremoveではなく逆にaddで480以下を指定してみましたが、うまくいきませんでした。

補足情報(FW/ツールのバージョンなど)

javascriptは直接headに入れています。

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

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

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

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

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

m.ts10806

2021/03/01 11:08

htmlもマークダウン正しくしてください。 https://teratail.com/questions/238564 >javascriptは直接headに入れています それもきちんとコードとして提示してください。 文章説明では何も伝わりません。
MYamasa

2021/03/02 01:29

早速ご回答いただきありがとうございます。すいませんでした。コードとして提示するという方法がわからずいただいたURLを参照して試してみたいと思います。なお、デベロッパーツールで見たところエラーは出ていませんでした。試しにresizeをresiseとしてみたらエラー自体は出たので見ているところが間違っていたりということはないようですが・・。
m.ts10806

2021/03/02 01:33

質問は編集できます。 こちらは回答ではなく質問への追記修正依頼のコメント欄です
guest

回答1

0

removeClassの指定方法に問題があるのではないでしょうか。

【.removeClass() | jQuery API Documentation】
https://api.jquery.com/removeClass/

【.removeClass() | jQuery UI 1.10 日本語リファレンス | js STUDIO】
http://js.studio-kingdom.com/jqueryui/method_overrides/remove_class

マッチした要素セットに削除したいclass名を、1つまたは複数の場合はスペース区切りで指定します。

投稿2021/03/02 01:33

kei344

総合スコア69643

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

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

MYamasa

2021/03/02 06:10

早速丁寧なご回答いただきありがとうございます。いただいたサイトを参考に以下のようにスペース区切りにしいてみましたが変化がありませんでした・・もう少しいろいろ試してみたいと思います。 $(".pc").removeClass("fade-in fade-in-up fade-in-left scroll-in");
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問