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

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

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

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

jQuery

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

Q&A

0回答

414閲覧

条件分岐で一定数以上であれば、jQueryでimageのsrcを変える

aizen66

総合スコア7

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2021/02/16 08:10

編集2021/02/17 05:39
$(document).ready(function () { var date = new Date(); var t = "" + date.getFullYear() + date.getMonth() + date.getDate() + date.getHours() + date.getMinutes(); $.getJSON("count.json?t=" + t, function (json) { var c = new CountUp("counter", 0, json.count); c.start(); }) });

上記のcustom.jsコードのcountに数が返ってくるのですが、
そこで条件分岐して、数が4万以上であれば、jqueryでindex.htmlのimageのsrcを変えたいのですが、さっぱり分かりません。

index.html

index.html

1<figure class="about-left-img"><img src="imgs/about-img-left.png" alt="about-img-left"></figure>

画像はpreload しておくことと、
display:none;で読み込んでおくことも必要なのですが、どこにコードを加えたらよいのかアドバイスいただけますと幸いです。

以下は、package.json

package.json

1{ 2 "name": "countup.js", 3 "description": "Animates a numerical value by counting to it", 4 "version": "1.9.3", 5 "license": "MIT", 6 "main": "./dist/countUp.min.js", 7 "repository": { 8 "type": "git", 9 "url": "git+https://github.com/inorganik/countUp.js.git" 10 }, 11 "dependencies": {}, 12 "devDependencies": { 13 "del": "~0.1.3", 14 "gulp": "~3.8.10", 15 "gulp-rename": "~1.2.0", 16 "gulp-uglify": "^1.4.2", 17 "gulp-wrap-umd": "~0.2.1" 18 }, 19 "scripts": { 20 "build": "gulp", 21 "clean": "gulp clean" 22 } 23} 24

countUp-jquery.js

(function($) { $.fn.countup = function(params) { // make sure dependency is present if (typeof CountUp !== 'function') { console.error('countUp.js is a required dependency of countUp-jquery.js.'); return; } var defaults = { startVal: 0, decimals: 0, duration: 2, }; if (typeof params === 'number') { defaults.endVal = params; } else if (typeof params === 'object') { $.extend(defaults, params); } else { console.error('countUp-jquery requires its argument to be either an object or number'); return; } this.each(function(i, elem) { var countUp = new CountUp(elem, defaults.startVal, defaults.endVal, defaults.decimals, defaults.duration, defaults.options); countUp.start(); }); return this; }; }(jQuery));

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

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

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

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

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

yambejp

2021/02/16 08:27

jsonの内容もわからないし、画像を変えるのも何を元にするかわからない CountUpクラスも提示されていない jsonファイルにパラメータ渡ししてますが、スタティックなデータではないのですか?
aizen66

2021/02/17 05:40

あまりよく分かっていないのですが、おそらく動的なデータかと思われます。 不足していたコードファイルを追加いたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問