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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

Q&A

解決済

1回答

1910閲覧

[wow.js] PC / SPの切り替えで該当文字列の書き換えを行いたいです。

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2018/04/15 11:40

編集2018/04/15 17:59

現在wow.jsというプラグインを使って、可視領域に入ったらフェードインさせるサイトを構築しています。
こちらのプラグインはPC/SPで数値を切り替える方法がないので、少々困っております。

PCとSPでjsで数値を書き換える方法を知りたいのですが、検索の仕方が悪いのかなかなか出てきません。

具体的には、例えばPCだと

<h2 class="wow fadeIn" data-wow-offset="250">

のところを

SPだと

<h2 class="wow fadeIn" data-wow-offset="100">

に書き換えたいのです。
data-wow-offsetの中の数字を書き換えられればいいのですが、どなたか良い方法をご存知の方いらっしゃいましたら教えていただけますと幸いです。

ご確認のほど、よろしくお願いいたします。

自分で書いてみたJSを記載しておきますので、ご協力のほどよろしくお願いいたします。

<script> $(function(){ if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { var str = 'data-wow-offset="250"'; var result = str.replace( '250', '100' ); console.log( result ); } }); </script>

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

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

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

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

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

m.ts10806

2018/04/15 11:42

PC/SPの判断部分はどうなっているのでしょうか。
退会済みユーザー

退会済みユーザー

2018/04/15 11:47

SPの場合の処理を追記しました。ご確認のほどよろしくお願いいたします。
m.ts10806

2018/04/15 11:52

jQuery使ってるんですね。ちょっと回答追記します。
退会済みユーザー

退会済みユーザー

2018/04/15 13:53

書いてみたのですが、反応しなかったので、テスト環境のURLご用意しました。解決したら削除しますので、ご確認いただけますと幸いです。ご確認のほどよろしくお願いいたします。
退会済みユーザー

退会済みユーザー

2018/04/15 21:06

数値を調整したらPC/SPで切り替えなくてもいい塩梅でできたのですが、今後のために引き続きJSで切り替える方法を教えて頂けますと幸いです!よろしくお願いいたします!
guest

回答1

0

ベストアンサー

あまり要素自体を全て対象にreplaceは好ましくありません。
wow.jsには共通のwowというClassをつけるようですので、
そのエレメントに対して指定しましょう。

※未検証。おおよそ流れがわかればと

javascript

1window.onload = function() { 2 var wowele = getElementsByClassName("wow"); 3 var woffset = 250; 4 if(sp){ //spと判定されるフラグ 5 woffset =100; 6 } 7 wowele.dataset.wow-offset=woffset ; 8}

javascript

1jQuery版 2$(function(){ 3 var woffset = 250; 4 if(sp){ //spと判定されるフラグ 5 woffset =100; 6 } 7 $(".wow").data("wow-offset",woffset ), 8});

初期値250で入れておいてください。
値を書き換えるともしかしたらプラグインがキャッシュしている値とかが変わらない可能性があるのでload時にセットする形をとっていますが、確実に反映できるかどうかは確認してみてください。

投稿2018/04/15 11:51

編集2018/04/15 11:59
m.ts10806

総合スコア80765

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

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

退会済みユーザー

退会済みユーザー

2018/05/09 09:56 編集

書いてみたんですが、反応しなかったです。。 テスト環境のURLとIDとPWを記入しておきましたので、ご確認いただけますと幸いです。 JSは</body>直前に書いてます。
m.ts10806

2018/04/16 00:06

一部制限がある特殊な環境のためか、確認できないので、 できれば現在のコードを質問本文に反映いただけますか? 「反応しない」では何が起きているか分からないので、 具体的に記述願います(ブラウザ開発ツールのコンソールにエラーが出てないかとか) そもそも後から値を書き換えるやり方なので、 明示的にプラグインを呼び出すとかしないとdata属性の情報を正常に取得できないかもしれませんね。 回答最後に置いた「[jQuery] data属性を動的に変更する場合の注意点」については読んで試してみました?
m.ts10806

2018/04/16 00:11

PHPとかサーバー側の言語で切り替えた方が確実には思います。 お使いの環境が良く分かりませんが。
退会済みユーザー

退会済みユーザー

2018/05/09 09:58

すみません、お日にち空いてしまいました。。 こちら今回いい塩梅具合の内容で承認されたため解決に至りました。 ただ、mts10806様のご意見でかなり助けられましたので、ベストアンサーとさせていただきます。 ご協力頂きましてありがとうございました!
m.ts10806

2018/05/09 11:01

解決に至れたようで何よりです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問