お世話になっております。
agecheck.jsというJqueryを使用しているのですが、
Safariで確認したときのみ動作しません。
safariの開発者ツールには以下のエラーが出ます。(CHromeではエラーは出ません)
error
1jquery.agecheck.js:57 2SyntaxError: Expected an identifier but found '(' instead 3age.js:7 4TypeError: 'undefined' is not a function (evaluating '$.ageCheck')
該当のコードは以下なのですが、JShintで検証してもエラーはありませんでした。
Syntaxエラーのほかに何か原因があるのかどうかどなたかご教示いただきたいです。
js
1(function ($) { 2 $.ageCheck = function (options) { 3 const settings = $.extend({ 4 minAge: 21, 5 redirectTo: '', 6 redirectOnFail: '', 7 success: null, 8 successMsg: { 9 header: '<div id="loading"> <div class="bkimg"><img src="http://XXX/loading.png"></div> <div class="spinner"><img src="http://XXX/test.png"></div></div>', 10 body: '' 11 }, 12 underAgeMsg: '年齢確認が出来ませんでした。', 13 underAge: null, 14 errorMsg: { 15 invalidDay: '有効な日付をご入力ください' 16 }, 17 storage: 'sessionStorage', 18 storageExpires: null, 19 }, options); 20 21 var storage = window[settings.storage]; 22 23 const _this = { 24 month: '', 25 day: '', 26 year: '', 27 age: '', 28 errors: [], 29 setValues() { ★57行目 30 const month = $('.ac-container .month').val(); 31 const day = $('.ac-container .days').val(); 32 _this.month = month; 33 _this.days = day.replace(/^0+/, ''); // remove leading zero 34 _this.year = $('.ac-container .year').val(); 35 }, 36 validate() { 37 _this.errors = []; 38 if (!(/^([0-9]|[12]\d|3[0-1])$/.test(_this.days))||!(/^(19|20)\d{2}$/.test(_this.year))||!(/^(0[1-9]|[1-9]|1[0-2])$/.test(_this.month))) { 39 _this.errors.push(settings.errorMsg.invalidDay); 40 } 41 42 _this.clearErrors(); 43 _this.displayErrors(); 44 return _this.errors.length < 1; 45 }, 46 clearErrors() { 47 $('.errors').html(''); 48 }, 49 displayErrors() { 50 let html = '<ul>'; 51 for (let i = 0; i < _this.errors.length; i++) { 52 html += `<li><span>x</span>${_this.errors[i]}</li>`; 53 } 54 html += '</ul>'; 55 setTimeout(() => { 56 $('.ac-container .errors').html(html); 57 }, 200); 58 }, 59 reCenter(b) { 60 b.css('top', `${Math.max(0, (($(window).height() - (b.outerHeight() + 150)) / 2))}px`); 61 b.css('left', `${Math.max(0, (($(window).width() - b.outerWidth()) / 2))}px`); 62 }, 63 64 65 buildHtml() { 66 const copy = settings.copy; 67 let html = ''; 68 html += '<div class="ac-overlay"></div>'; 69 html += '<div class="ac-container">'; 70 html += `<img class="ageCheckImg" src="http://mixintl-stg.kir.jp/20200731_ez/test/img/top/agecheck.png" width="70%">`; 71 html += `<div class="subtitle">${settings.subtitle}</div>`; 72 html += `<h2>${settings.title}</h2>`; 73 html += `<p>${copy.replace('[21]', `<strong >${settings.minAge}</strong>`)}` + '</p>'; 74 html += `<div class="errors"></div>`; 75 76 html += '</select>'; 77 html += '<input type="number" class="year" placeholder="年(西暦)" min=0 save="" oninput="sliceMaxLength(this, 4)" oninput="validity.valid ? this.save = value : value = this.save;">'; 78 html += '<input type="number" class="month" placeholder="月" min=0 save="" oninput="sliceMaxLength(this, 2)" oninput="validity.valid ? this.save = value : value = this.save;">'; 79 html += '<input type="number" class="days" placeholder="日" min=0 save="" oninput="sliceMaxLength(this, 2)" oninput="validity.valid ? this.save = value : value = this.save;">'; 80 html += '<br><button>年齢確認</button></div>'; 81 82 $('body').append(html); 83 84 $('.ac-overlay').animate({ 85 opacity: 1, 86 }, 500, () => { 87 _this.reCenter($('.ac-container')); 88 $('.ac-container').css({ 89 opacity: 1, 90 }); 91 }); 92 93 //フォーカスでプレースホルダ消す 20200812.一旦無効化 94 /*('.ac-container .days, .ac-container .month,.ac-container .year').focus(function () { 95 $(this).removeAttr('placeholder'); 96 });*/ 97 }, 98 setAge() { 99 _this.age = ''; 100 const birthday = new Date(_this.year, _this.month, _this.days); 101 const ageDifMs = Date.now() - birthday.getTime(); 102 const ageDate = new Date(ageDifMs); // miliseconds from epoch 103 _this.age = Math.abs(ageDate.getUTCFullYear() - 1970); 104 }, 105 getStorage() { 106 if(settings.storage === 'cookie') { 107 return document.cookie.split(';').filter((item) => item.trim().startsWith('ageVerified=')).length; 108 } else { 109 return storage.getItem('ageVerified') === 'true'; 110 } 111 }, 112 setStorage(key, val, expires) { 113 try { 114 if(settings.storage === 'cookie') { 115 if(expires) { 116 let date = new Date(); 117 date.setTime(date.getTime() + (expires * 24 * 60 * 60 * 1000)); 118 expires = date.toGMTString(); 119 } 120 document.cookie = "ageVerified=true; expires=" + expires + ";"; 121 } else { 122 storage.setItem(key, val); 123 } 124 return true; 125 } catch (e) { 126 return false; 127 } 128 }, 129 handleSuccess() { 130 const successMsg = `<h3>${settings.successMsg.header}</h3><p>${settings.successMsg.body}</p>`; 131 $('.ac-container').html(successMsg); 132 setTimeout(() => { 133 $('.ac-container').animate({ 134 top: '-350px', 135 }, 200, () => { 136 $('.ac-overlay').animate({ 137 opacity: '0', 138 }, 500, () => { 139 if (settings.redirectTo !== '') { 140 window.location.replace(settings.redirectTo); 141 } else { 142 $('.ac-overlay, .ac-container').remove(); 143 if (settings.success) { 144 settings.success(); 145 } 146 } 147 }); 148 }); 149 }, 2000); 150 }, 151 handleUnderAge() { 152 const underAgeMsg = `<div class="underAgeMsg">${settings.underAgeMsg}</div>`; 153 $('.ac-container').html(underAgeMsg); 154 if (settings.redirectOnFail !== '') { 155 setTimeout(() => { 156 window.location.replace(settings.redirectOnFail); 157 }, 2000); 158 } 159 if (settings.underAge) { 160 settings.underAge(); 161 } 162 }, 163 }; // end _this 164 165 if (_this.getStorage()) { 166 return false; 167 } 168 169 _this.buildHtml(); 170 171 $('.ac-container button').on('click', () => { 172 _this.setValues(); 173 if (_this.validate() === true) { 174 _this.setAge(); 175 176 if (_this.age >= settings.minAge) { 177 if (!_this.setStorage('ageVerified', 'true', settings.storageExpires)) { 178 console.log(settings.storage + ' not supported by your browser'); 179 } 180 _this.handleSuccess(); 181 } else { 182 _this.handleUnderAge(); 183 } 184 } 185 }); 186 187 $(window).resize(() => { 188 _this.reCenter($('.ac-container')); 189 setTimeout(() => { 190 _this.reCenter($('.ac-container')); 191 }, 500); 192 }); 193 }; 194}(jQuery));
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。