Q&A
<script src="common/js/jquery.js"></script>
では何を実行しているのでしょうか？
jQueryを使った基本処理を行なっているのならば、
JSファイルへのパスか、
jQueryの読み込みが完了する前に、jQueryありきの処理をしようとしているからかと。
お世話に案っております。
表題の通りです。
制作しているサイトのランダム背景画像表示をjQueryで実装しています。
ローカルでは動作するものの、サーバーでは動作せず、困っております。
具体的に動作せず、というのは、「画像が表示されず、背景色#efefefのみ表示される」という状態です。
ご教示いただけますと助かります。
どうぞよろしくお願いします。
##●ヘッダー内
html
1<head> 2<meta charset="utf-8"> 3<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 4<meta content="" name="description"> 5<meta property="og:title" content="" /> 6<meta property="og:type" content="" /> 7<meta property="og:url" content="" /> 8<meta property="og:site_name" content="" /> 9 10<title>Nil Sanda Sri Lankan Jewelry</title> 11<link href="common/css/style.css" rel="stylesheet" type="text/css"> 12<link href="common/css/sp.css" rel="stylesheet" type="text/css"> 13<link href="common/css/tablet.css" rel="stylesheet" type="text/css"> 14 15 16<link rel="stylesheet" href="https://use.typekit.net/tkx0pca.css"><!--adobeフォント--> 17<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,100&display=swap" rel="stylesheet"><!--googleフォント--> 18<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css" type="text/css"/><!--リアルタイムエラー用css--> 19<!--CDN経由でjQuery3を読み込み--> 20<script src="common/js/jquery.js"></script> 21<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 22<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"> 23 <script src="https://unpkg.com/scrollreveal"></script> 24 25 26 27 28<!--リアルタイムエラー用jQuery--> 29<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-ja.min.js"></script> 30<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script> 31<link rel="icon" href="common/images/favicon.ico" /> 32<!--りょうゴシック PlusN--> 33<script> 34 (function(d) { 35 var config = { 36 kitId: 'mas5ewn', 37 scriptTimeout: 3000, 38 async: true 39 }, 40 h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) 41 })(document); 42</script> 43<!--りょうゴシック PlusN--> 44</head>
##●画像表示部分
html
1 <div class="section02wrapper" id="randomimg"> 2 <section class="section02wrapperInner2"> 3 <h2 class="introduction_title">Introduction</h2> 4 <ul class="introductoin_link_wrapper"> 5 <li><a href="https://www.youtube.com/channel/UCJ-Gc4uoyECy8vTOZ3mtd8Q?view_as=subscriber" target="_blank" class="vlog">Vlog</a></li> 6 <li><a href="ourshop/index.html" class="ourshop">Our Shop</a></li></ul> 7 8 </section> 9 10 11 </div>
css
1.section02wrapper{ 2 width: 100vw; 3 border-bottom:solid 1px #8d8d8d; 4 5} 6#randomimg{ 7 width: 100vw; 8 background-repeat: no-repeat; 9 background-size: cover; 10 11 12 background-color: #efefef; 13 14 15}
javascript
1//section02の背景画像のランダム表示 2 $(function() { 3 var array = [ 4 "common/images/section02_background01.jpg", 5 "common/images/section02_background02.jpg", 6 "common/images/section02_background03.jpg", 7 "common/images/section02_background04.jpg", 8 "common/images/section02_background05.jpg" 9 ]; 10 11 var l = array.length; 12 var r = Math.floor(Math.random()*l); 13 var bgimgurl = array[r]; 14 $("div#randomimg").css('background-image',('url("'+bgimgurl+'")')); 15});
「動作せず」とのことですが、具体的には何が起きていますか？
結果（実際に起きたこと）を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1
> miyabi_takatsuk さん
お問い合わせの件
ご指摘ありがとうございます。今回のファイルには必要ないファイルでしたので、コメントアウトしました。
> Lhankor_Mhyさん
お問い合わせの件
どうなったかという事象を記載しました。
どうぞよろしくお願いします。
回答2件
0
自己解決
javascript
1 $(function () { 2 var num = Math.ceil(5 * Math.random()); 3 $('div.section02wrapper').addClass('background' + num); 4});
気持ちをきりかえて、上記のように変更いたしましたら動作しました。
html側のsection02wrapperをidからclassに変更しました。
投稿2020/12/15 05:47
総合スコア29
0
"common/images/section02_background01.jpg"等をhttpから始まるURLに書き換えてみてください。
投稿2020/10/27 14:30
総合スコア69606
コメントありがとうございます。
絶対パスにしてみましたが、表示されませんでした。
書き換えたパスをブラウザのURL欄に入力してみてください。
画像が表示されたのであればjQueryのどこかが間違っているかもしれませんが、画像が表示されないのであればパスが間違っていると思われます。
あなたの回答
tips
プレビュー
