JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-4のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。
+ JavaScript & jQuery 質問用スレッド vol.7 + [無断転載禁止]©2ch.net
http://mevius.2ch.net/test/read.cgi/hp/1467906819/
探検
+ JavaScript & jQuery 質問用スレッド vol.8 +
■ このスレッドは過去ログ倉庫に格納されています
2017/11/10(金) 22:44:30.04ID:???
2018/10/05(金) 12:52:59.27ID:???
2018/10/05(金) 13:02:32.94ID:???
>>478
発想が手続き脳になってると思われる
まず、何に対して処理を適用するのかをしっかり認識すること
言い換えると処理を分けた後に、何に対して処理をするのか?ということ
その処理を適用する対象を最初に持ってくる
例えば<li>のリストが有って「次のノードがある場合に、現在のノードを赤くする」であれば
処理を適用する対象は、現在のノードなのだから
$('li').filter(function() { return $(this).next().is('li') }).css('color', 'red')
↑処理を適用する対象を一番最初に持ってくる
そしてあとはfilterで条件を書く
でもこれよりも以下のほうがより直感的だろう
$('li:not(:last-of-type)').css('color', 'red')
つまりだな。「やりたいこと」っていうのがその文章に
書かれてないから手続き型脳だなって思ったわけ。
発想が手続き脳になってると思われる
まず、何に対して処理を適用するのかをしっかり認識すること
言い換えると処理を分けた後に、何に対して処理をするのか?ということ
その処理を適用する対象を最初に持ってくる
例えば<li>のリストが有って「次のノードがある場合に、現在のノードを赤くする」であれば
処理を適用する対象は、現在のノードなのだから
$('li').filter(function() { return $(this).next().is('li') }).css('color', 'red')
↑処理を適用する対象を一番最初に持ってくる
そしてあとはfilterで条件を書く
でもこれよりも以下のほうがより直感的だろう
$('li:not(:last-of-type)').css('color', 'red')
つまりだな。「やりたいこと」っていうのがその文章に
書かれてないから手続き型脳だなって思ったわけ。
2018/10/05(金) 13:03:05.05ID:???
2018/10/05(金) 13:45:11.97ID:???
2018/10/05(金) 16:03:45.99ID:???
$("要素名") ← セレクタ打ち込むのがめんどくさいんだが楽な方法ない?
jQueryで一番いやなところがここなんだよな
jQueryで一番いやなところがここなんだよな
2018/10/05(金) 16:25:52.32ID:???
>>483
$(document.getElementById(ID名))
$(document.getElementsByTagName(要素名))
$(document.querySelectorAll(要素名))
どれでも好きなものをどうぞ
$(document.getElementById(ID名))
$(document.getElementsByTagName(要素名))
$(document.querySelectorAll(要素名))
どれでも好きなものをどうぞ
2018/10/05(金) 16:33:53.53ID:???
流石に余計長くなってたらダメだろw
セレクタは必要最小限の情報になってるので
これ以上短くはできないと思うよ
メソッド名は$の1一文字だし、これ以上短くはできないと思うな。
セレクタは必要最小限の情報になってるので
これ以上短くはできないと思うよ
メソッド名は$の1一文字だし、これ以上短くはできないと思うな。
2018/10/05(金) 16:36:14.42ID:???
メソッド名が長いのがDOM APIの二番目にいやなこと
DOM APIの一番嫌な所はループでいちいち回さないといけない所
DOM APIの一番嫌な所はループでいちいち回さないといけない所
2018/10/05(金) 19:25:11.87ID:???
2018/10/05(金) 23:46:43.24ID:???
はぁ?じゃあべき論とか言い出すなっての、
両方ともエラーを返してない現実があるってのに
エラーを返すべきではないかとか言われても、
お前DOM APIとjQueryの方法から否定されてんでwで終わるだろ
両方ともエラーを返してない現実があるってのに
エラーを返すべきではないかとか言われても、
お前DOM APIとjQueryの方法から否定されてんでwで終わるだろ
2018/10/06(土) 12:14:01.89ID:???
jQueryって初心者向けのライブラリだよな
2018/10/06(土) 12:33:26.81ID:???
ライブラリに初心者用とかあるんか?
初心者でも使えるという意味なら
そのとおりだが、上級者も使ってる
初心者でも使えるという意味なら
そのとおりだが、上級者も使ってる
2018/10/06(土) 13:37:14.98ID:???
数学において数式に番号を付ける際、
y=f(x) ---------------- (1)
みたいな感じで横に伸びる線を書くことはよくありますが、HTML上でこれを実現したいです。
素朴に思いついたものとしては
<ul>
<li>y=f(x)<hr style="display:inline" /><span style="float:right">(1)</span></li>
</ul>
ですが、これは正しく機能しません。
どうすれば良いですか?
要望としては
- ブラウザのサイズに応じて自由に(無限に)伸縮する横線で、
数式番号(上の例で言えば(1))へ繋がる横線(くっついていても、いなくてもどちらでもいい)
- きちんと一行に収まる。改行していびつな形になるのはダメ
です。
y=f(x) ---------------- (1)
みたいな感じで横に伸びる線を書くことはよくありますが、HTML上でこれを実現したいです。
素朴に思いついたものとしては
<ul>
<li>y=f(x)<hr style="display:inline" /><span style="float:right">(1)</span></li>
</ul>
ですが、これは正しく機能しません。
どうすれば良いですか?
要望としては
- ブラウザのサイズに応じて自由に(無限に)伸縮する横線で、
数式番号(上の例で言えば(1))へ繋がる横線(くっついていても、いなくてもどちらでもいい)
- きちんと一行に収まる。改行していびつな形になるのはダメ
です。
2018/10/07(日) 02:57:55.91ID:???
2018/10/07(日) 10:21:03.02ID:???
>>491
この子は teratail で有名なアスペ君だから注意ね
https://teratail.com/questions/149753
> infologicmation
> 結局自己解決できました。
> 一応、参考までに私が作ったテストコードを載せておきます。
>
> ...中略...
>
> このサイトなら良い指針やアドバイスが得られると思って、わざわざ時間を掛けて質問文を作ったにもかかわらず、アスペみたいな見当違いの的外れの回答が送られたり、
> そんなのの相手に無駄に労力割かされたり散々な目に会ったのに、結局は自力で解決するという結末で、本当に不毛なことをさせられたと実感してます。
> teratailはもっと経験豊かな人が居るんじゃないんですか?どうなってんの?178viewもありながら(確認時点で)…
>
> 当然、ベストレビュアーは無しとします。
この子は teratail で有名なアスペ君だから注意ね
https://teratail.com/questions/149753
> infologicmation
> 結局自己解決できました。
> 一応、参考までに私が作ったテストコードを載せておきます。
>
> ...中略...
>
> このサイトなら良い指針やアドバイスが得られると思って、わざわざ時間を掛けて質問文を作ったにもかかわらず、アスペみたいな見当違いの的外れの回答が送られたり、
> そんなのの相手に無駄に労力割かされたり散々な目に会ったのに、結局は自力で解決するという結末で、本当に不毛なことをさせられたと実感してます。
> teratailはもっと経験豊かな人が居るんじゃないんですか?どうなってんの?178viewもありながら(確認時点で)…
>
> 当然、ベストレビュアーは無しとします。
2018/10/18(木) 02:24:49.21ID:???
私たち日本人の、日本国憲法を改正しましょう。
総ム省の、『憲法改正國民投票法』、でググって
みてください。拡散も含め、お願い致します。
総ム省の、『憲法改正國民投票法』、でググって
みてください。拡散も含め、お願い致します。
2018/10/20(土) 17:19:33.30ID:???
全部のjavascriptファイルにinitializeメソッド実装してるプロジェクトあるんだけど
それをどこから読んでるか全くわからんのだけどjavascriptとかhtmlの機能で
自動で呼ばれるなんて仕様ないよね?
それをどこから読んでるか全くわからんのだけどjavascriptとかhtmlの機能で
自動で呼ばれるなんて仕様ないよね?
2018/10/20(土) 18:06:17.41ID:???
同じ関数名は上書きされるだろ
2018/10/23(火) 12:12:09.63ID:???
質問です。
jQueryで、指定した要素がy座標で中央らへんになるようにページをスクロールしたいのですが、どうすればよいでしょうか?
var top = $(this).offset().top;
$('html, body').animate({ scrollTop: top }, 'fast');
とすることでなんとなくスクロールはできましたが、上端になったり下端になったり安定しません。
jQueryで、指定した要素がy座標で中央らへんになるようにページをスクロールしたいのですが、どうすればよいでしょうか?
var top = $(this).offset().top;
$('html, body').animate({ scrollTop: top }, 'fast');
とすることでなんとなくスクロールはできましたが、上端になったり下端になったり安定しません。
498497
2018/10/23(火) 17:09:36.94ID:??? >>497 です。
試行錯誤の結果、あまりよくわかってませんがbodyにpadding: 50vh 0;を設定したうえで
var top = ( $(this).offset().top ) - 400;
$('html, body').animate({ scrollTop: top }, 0);
とすると一応、$(this)がどこにあっても真ん中に表示されるようになりました。
あとfastだと上にスクロールする動きが変だったので速度は0に。
これで一応自己解決した、ということになるでしょうか。
とりあえず自分の環境に合わせて400としましたが、ほんとはちゃんと画面の高さ/2で計算したほうがいいでしょうね。
試行錯誤の結果、あまりよくわかってませんがbodyにpadding: 50vh 0;を設定したうえで
var top = ( $(this).offset().top ) - 400;
$('html, body').animate({ scrollTop: top }, 0);
とすると一応、$(this)がどこにあっても真ん中に表示されるようになりました。
あとfastだと上にスクロールする動きが変だったので速度は0に。
これで一応自己解決した、ということになるでしょうか。
とりあえず自分の環境に合わせて400としましたが、ほんとはちゃんと画面の高さ/2で計算したほうがいいでしょうね。
2018/10/23(火) 17:21:57.73ID:???
画面の高さを取得する方法があるからそれ調べると良い。
あと画像などすべてのコンテンツが終わった後に呼び出さないと高さがずれると思う
あと画像などすべてのコンテンツが終わった後に呼び出さないと高さがずれると思う
500Name_Not_Found
2018/10/23(火) 18:30:59.34ID:nf9Chzw5 WordPressスレと迷ったのですが、こちらで質問させてください
WordPressにおけるfancyboxに関してです
現在、HTMLのウェブサイトをWordPressに移行しています
fancybox3を使っていたのでそのまま使おうとしたのですが、WordPressで使われているjqueryが古いのか反映されきれないオプションがあります
<a href="<?php echo content_url(); ?>/uploads/03-1.png" data-fancybox="03">テキスト</a><a href="<?php echo content_url(); ?>/uploads/03-2.png" data-fancybox="03"></a><br>
テキストをクリックするとまず画像が一枚表示され、他の画像もグループ化することによって順に表示されるようにしたいのです
HTMLのサイトでは上記の表記で問題なく動いています
easy fancyboxではテキストをクリックすると画像が呼び出される方法およびグループ化された画像を順に表示させる方法が分かりませんでした
WordPressでは固定ページでテンプレートにすべてコンテンツを入れているのでそれが原因なのでしょうか
色々調べたのですが、やり方が間違っているのかそもそも出来ないのか分からず、解決策をお持ちの方がいらっしゃれば教えてくださると嬉しいです
よろしくお願いします
WordPressにおけるfancyboxに関してです
現在、HTMLのウェブサイトをWordPressに移行しています
fancybox3を使っていたのでそのまま使おうとしたのですが、WordPressで使われているjqueryが古いのか反映されきれないオプションがあります
<a href="<?php echo content_url(); ?>/uploads/03-1.png" data-fancybox="03">テキスト</a><a href="<?php echo content_url(); ?>/uploads/03-2.png" data-fancybox="03"></a><br>
テキストをクリックするとまず画像が一枚表示され、他の画像もグループ化することによって順に表示されるようにしたいのです
HTMLのサイトでは上記の表記で問題なく動いています
easy fancyboxではテキストをクリックすると画像が呼び出される方法およびグループ化された画像を順に表示させる方法が分かりませんでした
WordPressでは固定ページでテンプレートにすべてコンテンツを入れているのでそれが原因なのでしょうか
色々調べたのですが、やり方が間違っているのかそもそも出来ないのか分からず、解決策をお持ちの方がいらっしゃれば教えてくださると嬉しいです
よろしくお願いします
501Name_Not_Found
2018/10/23(火) 18:33:14.33ID:nf9Chzw5 途中で切れてしまいました 申し訳ないです
解決策をお持ちの方がいらっしゃいましたらお教えくださるとうれしいです
よろしくお願いします
解決策をお持ちの方がいらっしゃいましたらお教えくださるとうれしいです
よろしくお願いします
2018/10/24(水) 03:20:52.84ID:???
>>497-499
vh, vw は「Ctrl +-」で、文字・画像などが拡大縮小できなくなるから、使いづらい
vh, vw は「Ctrl +-」で、文字・画像などが拡大縮小できなくなるから、使いづらい
503497-498
2018/10/24(水) 04:28:12.33ID:???2018/10/24(水) 09:30:20.01ID:???
大勢に向けたサイトでなく、少数に向けたWebツールなのですが
Spaceキーを押すことで、対象をtoggleしようとしています
しかし、リマップソフトなどでSandS(SpaceキーをShiftキー代わりに使う)を設定している場合(主に僕ですが)は
Spaceを1度押すだけでキーイベントが2回発火してしまうようです
つまりtoggleが2回行われ、元に戻ってしまいます
ならいっそ4回押されるごとに、と変数を使ってみてもたまに半端にカウントがずれてしまいます
どうすれば1回だけの発火に抑えてうまくtoggleさせられるでしょうか…?
Spaceキーを押すことで、対象をtoggleしようとしています
しかし、リマップソフトなどでSandS(SpaceキーをShiftキー代わりに使う)を設定している場合(主に僕ですが)は
Spaceを1度押すだけでキーイベントが2回発火してしまうようです
つまりtoggleが2回行われ、元に戻ってしまいます
ならいっそ4回押されるごとに、と変数を使ってみてもたまに半端にカウントがずれてしまいます
どうすれば1回だけの発火に抑えてうまくtoggleさせられるでしょうか…?
2018/10/24(水) 09:48:49.28ID:???
一応keyupでなくkeypressにすると1回のみのカウントになりますが、
keypressはどうもIMEがオフの状態でないと発火しないようで…
(あくまでIMEはオンである必要があるので…)
keypressはどうもIMEがオフの状態でないと発火しないようで…
(あくまでIMEはオンである必要があるので…)
506Name_Not_Found
2018/10/24(水) 22:58:43.34ID:G6k1YekJ jQueryオブジェクトは何度も使う場合は変数に代入しておいたほうが、探させる処理の負担を減らせるようですが
$(this)も変数に代入しておいたほうがいいですか?($thatとか?)
それとも「既に代入された結果が$(this)であるため、その必要はない」ですか?
$(this)も変数に代入しておいたほうがいいですか?($thatとか?)
それとも「既に代入された結果が$(this)であるため、その必要はない」ですか?
507506
2018/10/24(水) 23:21:52.65ID:G6k1YekJ …と思いましたが()がある時点で引数がある、つまり関数なのでたとえthisといえど毎回処理してるということになりそうですね
やはり代入しておくほうが速い…?
やはり代入しておくほうが速い…?
2018/10/25(木) 00:41:52.39ID:???
jQuery のソースコードでは、冒頭部分で、よく使うものを変数に入れてる
var arr = [];
var document = window.document;
var getProto = Object.getPrototypeOf;
var slice = arr.slice;
var concat = arr.concat;
var push = arr.push;
var indexOf = arr.indexOf;
var toString = class2type.toString;
var hasOwn = class2type.hasOwnProperty;
var fnToString = hasOwn.toString;
var ObjectFunctionString = fnToString.call( Object );
変数をループの外に出す、テクニックも使っている。
ただし、ループ中に、変数が変化しないに限る
length = elems.length;
for ( ; i < length; i++ ) { }
こう書くと、毎回メソッドが呼ばれてしまうから。
for ( ; i < elems.length; i++ ) { }
JavaScript のthis は、that に代入することが多いけど、
jQuery のthis は、必ずインスタンスを指すように修正されているから、
that に代入することは少ない
var arr = [];
var document = window.document;
var getProto = Object.getPrototypeOf;
var slice = arr.slice;
var concat = arr.concat;
var push = arr.push;
var indexOf = arr.indexOf;
var toString = class2type.toString;
var hasOwn = class2type.hasOwnProperty;
var fnToString = hasOwn.toString;
var ObjectFunctionString = fnToString.call( Object );
変数をループの外に出す、テクニックも使っている。
ただし、ループ中に、変数が変化しないに限る
length = elems.length;
for ( ; i < length; i++ ) { }
こう書くと、毎回メソッドが呼ばれてしまうから。
for ( ; i < elems.length; i++ ) { }
JavaScript のthis は、that に代入することが多いけど、
jQuery のthis は、必ずインスタンスを指すように修正されているから、
that に代入することは少ない
2018/10/25(木) 00:48:25.41ID:???
>>503
ディスプレイの高さでも、色々ある
タスクバーのような、固定部分を引いた画面の高さ (ピクセル単位)とか。
window.screen.availHeight
固定部分を含むのか、含まないのか
ディスプレイの高さでも、色々ある
タスクバーのような、固定部分を引いた画面の高さ (ピクセル単位)とか。
window.screen.availHeight
固定部分を含むのか、含まないのか
510503
2018/10/25(木) 00:56:06.87ID:???2018/10/25(木) 02:00:14.23ID:???
512506-507
2018/10/25(木) 03:20:58.78ID:??? >>511
例えば
$that = $(this);
let val = $that.val();
let xxx = $that.attr('xxx');
let yyy = $that.attr('yyy');
....(略)
のようなものを想定していましたが、何かもっと良い方法がありましたか?
(このくらいならjQueryを使わないでthis.valueなどとしたほうがほんとは速いのでしょうけれど、
へたに混ぜると細かな差異に振り回されないか不安で…)
例えば
$that = $(this);
let val = $that.val();
let xxx = $that.attr('xxx');
let yyy = $that.attr('yyy');
....(略)
のようなものを想定していましたが、何かもっと良い方法がありましたか?
(このくらいならjQueryを使わないでthis.valueなどとしたほうがほんとは速いのでしょうけれど、
へたに混ぜると細かな差異に振り回されないか不安で…)
2018/10/26(金) 14:05:52.77ID:???
var c = $('#car');
と、jQuery Object を変数に入れても、メソッドチェーンでも同じ
$('#car').before(何々).prepend(何々).append(何々).after(何々);
return で、そのインスタンス(jQuery Object)を戻しているから、同じ
$('#car').attr({src: 何々, title: 何々}).css({top: 50, left: 100});
と、jQuery Object を変数に入れても、メソッドチェーンでも同じ
$('#car').before(何々).prepend(何々).append(何々).after(何々);
return で、そのインスタンス(jQuery Object)を戻しているから、同じ
$('#car').attr({src: 何々, title: 何々}).css({top: 50, left: 100});
514512
2018/10/27(土) 10:15:54.39ID:??? >>513
あ、すみません、実際には続けてではなく離れた場所でやる場合です…
あと
$that = $(this);
$that.val( $that.val() + 'ついか' );
$that.attr( 'xxx', $that.attr('xxx') + 'ついか' );
この場合はどうですか?
あ、すみません、実際には続けてではなく離れた場所でやる場合です…
あと
$that = $(this);
$that.val( $that.val() + 'ついか' );
$that.attr( 'xxx', $that.attr('xxx') + 'ついか' );
この場合はどうですか?
2018/10/27(土) 10:33:33.07ID:???
$thatなんかいらない
$(this).val(function(i, value) {
return value + 'ついか';
}).attr('xxx', function(i, attr) {
return attr + 'ついか';
});
$(this).val(function(i, value) {
return value + 'ついか';
}).attr('xxx', function(i, attr) {
return attr + 'ついか';
});
2018/10/27(土) 12:05:49.32ID:???
>>515
jQuery久々ですが、そういえばそういうの見かけた覚えがあります…
ドキュメント見たら普通に書いてありましたね
現代風にするとこうでしょうか…?
$(this).val( (i, value) => {
return value + 'ついか';
}).attr('xxx', (i, attr) => {
return attr + 'ついか';
});
indexは省略しても動くようですが、省略しないほうがいいんですかね?
jQuery久々ですが、そういえばそういうの見かけた覚えがあります…
ドキュメント見たら普通に書いてありましたね
現代風にするとこうでしょうか…?
$(this).val( (i, value) => {
return value + 'ついか';
}).attr('xxx', (i, attr) => {
return attr + 'ついか';
});
indexは省略しても動くようですが、省略しないほうがいいんですかね?
2018/10/29(月) 03:15:25.09ID:???
長いと怒られましたので二つに分けます
かなり初歩的な質問になってしまうと思いますがよろしくお願いします。
最近勉強を始めHTMLCSSでサイトを作ろうとしておりました。
その中に画像のスライダーを入れたく思い、JSもしくはjQueryで組もうと
いろんなサイトを参考にしてたのですがうまくいきません。
現状、画像が縦に並んでる状態です。
jQueryをDLしてプラグインするのは難しそうだったので
head内からファイルで読み込む方法を選択しました。
明記できない部分が多かったので消去してますが
下記のコードで直す点があれば教えていただきたいです。
下記以外のコードでも試しましたができなかったので
もっと根本的なところが間違ってるとも思うのですが
かなり初歩的な質問になってしまうと思いますがよろしくお願いします。
最近勉強を始めHTMLCSSでサイトを作ろうとしておりました。
その中に画像のスライダーを入れたく思い、JSもしくはjQueryで組もうと
いろんなサイトを参考にしてたのですがうまくいきません。
現状、画像が縦に並んでる状態です。
jQueryをDLしてプラグインするのは難しそうだったので
head内からファイルで読み込む方法を選択しました。
明記できない部分が多かったので消去してますが
下記のコードで直す点があれば教えていただきたいです。
下記以外のコードでも試しましたができなかったので
もっと根本的なところが間違ってるとも思うのですが
518517
2018/10/29(月) 03:18:33.12ID:??? <!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="■■.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<title>■■</title>
<style>
</style>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
//ここに指定するクラスと、先ほど<div>に指定したクラスを一致させること
});
</script>
</head>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="■■.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<title>■■</title>
<style>
</style>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
//ここに指定するクラスと、先ほど<div>に指定したクラスを一致させること
});
</script>
</head>
519517
2018/10/29(月) 03:20:33.84ID:??? <body>
<div class="flexslider">
<ul class="slides"><!-- 必ずクラスは slides -->
<li>
<img src="1.jpg" /><!-- 表示させたい項目を<li>に囲んで並べる -->
</li>
<li>
<img src="2.jpg" />
</li>
</ul>
</div>
</div>
</body>
</html>
長くなりましたがどうぞよろしくお願いいたします
<div class="flexslider">
<ul class="slides"><!-- 必ずクラスは slides -->
<li>
<img src="1.jpg" /><!-- 表示させたい項目を<li>に囲んで並べる -->
</li>
<li>
<img src="2.jpg" />
</li>
</ul>
</div>
</div>
</body>
</html>
長くなりましたがどうぞよろしくお願いいたします
2018/10/29(月) 06:26:27.67ID:???
flexslider.cssを読んでない
2018/10/29(月) 23:13:10.14ID:???
使っている、jQuery のバージョンが古くない?
それに、jQueryを2つも読み込んでいるのも、おかしい
それに、jQueryよりも先に、jquery.flexslider-min.js を読み込んでいるのも、おかしい。
たいてい、jQueryを一番先に読み込む
参考にしているソースコードが古いのでは?
「javascript jquery slider」で検索!
それに、jQueryを2つも読み込んでいるのも、おかしい
それに、jQueryよりも先に、jquery.flexslider-min.js を読み込んでいるのも、おかしい。
たいてい、jQueryを一番先に読み込む
参考にしているソースコードが古いのでは?
「javascript jquery slider」で検索!
2018/10/30(火) 17:20:47.18ID:???
ありがとうございます
やはり根本的に間違えてるようですね
指摘いただいたところを直し
教えていただいた情報でやり直してみます
やはり根本的に間違えてるようですね
指摘いただいたところを直し
教えていただいた情報でやり直してみます
2018/10/30(火) 23:46:13.60ID:???
jQueryのQってなに
2018/10/31(水) 05:48:12.06ID:???
Queryの頭文字
2018/10/31(水) 05:48:36.67ID:???
イニシャルQ
2018/10/31(水) 06:44:53.21ID:???
めるりんQ
2018/10/31(水) 07:13:45.56ID:???
オバQ
2018/10/31(水) 08:53:36.63ID:???
jQueryのjは?
2018/11/02(金) 15:25:42.78ID:???
jQueryにて
…
<div.aaa>
<div.iii>
<div.aaa>
<div.iii> ★
<div.iii> ★
<div.iii> ★
<div.aaa> ←$(this)
<div.iii>
…
$(this)から見て、違うクラス(あるいは特定のクラス)の連続した兄たち ★★★
(thisと同じクラスの兄に挟まれた兄弟)
を絞り込むにはどうすればよいでしょうか?
…
<div.aaa>
<div.iii>
<div.aaa>
<div.iii> ★
<div.iii> ★
<div.iii> ★
<div.aaa> ←$(this)
<div.iii>
…
$(this)から見て、違うクラス(あるいは特定のクラス)の連続した兄たち ★★★
(thisと同じクラスの兄に挟まれた兄弟)
を絞り込むにはどうすればよいでしょうか?
2018/11/03(土) 02:18:37.81ID:???
div閉じてないから構造がわからん
531529
2018/11/03(土) 17:53:13.42ID:??? >>539
すみません、色々複雑になってはいますがひとまずその場で閉じているということで…
こうですね
<div.aaa></div>
<div.iii></div>
<div.aaa></div>
<div.iii></div> ←★
<div.iii></div> ←★
<div.iii></div> ←★
<div.aaa></div> ←$(this)
<div.iii></div>
すみません、色々複雑になってはいますがひとまずその場で閉じているということで…
こうですね
<div.aaa></div>
<div.iii></div>
<div.aaa></div>
<div.iii></div> ←★
<div.iii></div> ←★
<div.iii></div> ←★
<div.aaa></div> ←$(this)
<div.iii></div>
2018/11/04(日) 10:50:04.18ID:???
2018/11/04(日) 23:48:12.81ID:???
2018/11/05(月) 10:12:39.74ID:???
>>533
prevUntilを使って兄要素を全部取得、eachで直近の兄のクラスを取り、直近の兄以降のクラス判定をして格納、って感じかな
prevUntilを使って兄要素を全部取得、eachで直近の兄のクラスを取り、直近の兄以降のクラス判定をして格納、って感じかな
535529
2018/11/05(月) 12:51:18.54ID:???536533
2018/11/05(月) 19:53:23.26ID:???2018/11/06(火) 15:52:01.80ID:???
そのサイトを閲覧している間(タブを最前面にしている間)だけ動くスクリプトって作れますか?
ブックマークレットでもなんでもいいんですけど、自分用に
「このタブを閲覧しているときだけ動くストップウォッチ」
的なものが欲しくて…
つまり他のタブを閲覧中は止まるようにしたいのです
拡張機能も見かけましたがどちらかというと「今まで何時間見たか」を計るやつっぽくて
そうではなくストップウォッチ的に頻繁にスタートとリセットを繰り返しながら計測したく…
「マウスカーソルがbodyに乗ってる間だけ時計が進む」みたくすれば可能でしょうか?
ブックマークレットでもなんでもいいんですけど、自分用に
「このタブを閲覧しているときだけ動くストップウォッチ」
的なものが欲しくて…
つまり他のタブを閲覧中は止まるようにしたいのです
拡張機能も見かけましたがどちらかというと「今まで何時間見たか」を計るやつっぽくて
そうではなくストップウォッチ的に頻繁にスタートとリセットを繰り返しながら計測したく…
「マウスカーソルがbodyに乗ってる間だけ時計が進む」みたくすれば可能でしょうか?
2018/11/06(火) 17:17:53.55ID:???
>>537
visibilitychangeイベントとdocument.hidden
visibilitychangeイベントとdocument.hidden
2018/11/06(火) 17:36:37.71ID:???
>>538
まさにこれですね!ありがとうございます!
まさにこれですね!ありがとうございます!
540Name_Not_Found
2018/11/10(土) 21:39:13.96ID:sysZOBce2018/11/10(土) 22:07:04.34ID:???
>>540
ブラクラ
ブラクラ
2018/11/11(日) 17:23:24.20ID:???
$(document).on('mousemove', function() {
});
って効かないんですか?
ドラッグ時、マウスがbody外に出てもいいようにしたかったんですけど
mousemoveイベント自体を検知しなくなってしまいました
(documentでなく何かしらのdom要素に対して設定しないといけない?)
mouseupはdocumentに設定しても大丈夫だった(boby外でも検知できた)のですが…
});
って効かないんですか?
ドラッグ時、マウスがbody外に出てもいいようにしたかったんですけど
mousemoveイベント自体を検知しなくなってしまいました
(documentでなく何かしらのdom要素に対して設定しないといけない?)
mouseupはdocumentに設定しても大丈夫だった(boby外でも検知できた)のですが…
2018/11/11(日) 23:43:37.47ID:???
>$(document)
コンソールに、エラーが出ているはず
$( '#abc' )
文字列型で、CSS セレクターを書く
コンソールに、エラーが出ているはず
$( '#abc' )
文字列型で、CSS セレクターを書く
544542
2018/11/11(日) 23:59:30.72ID:??? >>543
うーん…?
でも単に
let wa= 0;
$(document).on('mousemove', function() {
wa++
console.log(wa);
return false;
});
としただけなら、別にエラーにならずちゃんとログも出るので
何か別の部分がおかしかったのかもしれません
(それともたまたま動いてしまっているだけで本当は推奨されていなかったりする…?)
うーん…?
でも単に
let wa= 0;
$(document).on('mousemove', function() {
wa++
console.log(wa);
return false;
});
としただけなら、別にエラーにならずちゃんとログも出るので
何か別の部分がおかしかったのかもしれません
(それともたまたま動いてしまっているだけで本当は推奨されていなかったりする…?)
2018/11/12(月) 01:36:11.64ID:???
mousemoveは "対象要素の上で" 動いたときに発生するんだよ
bodyの外で動いても発生しない
外に出るのを検出するのはmouseleave
bodyの外で動いても発生しない
外に出るのを検出するのはmouseleave
2018/11/12(月) 09:12:36.96ID:???
2018/11/12(月) 09:15:29.83ID:???
自衛隊は暴力装置
548543
2018/11/13(火) 04:20:20.09ID:??? $(document)
この、document って、" " で囲んでいないから変数だよな。
変数を入れても動くのか
知らなかった
この、document って、" " で囲んでいないから変数だよな。
変数を入れても動くのか
知らなかった
2018/11/13(火) 05:14:06.28ID:???
こんなことしても動くよ
DOM要素の配列
$(document.querySelectorAll('A'))
二重jQueryオブジェクト(普通はしない)
$($('A'))
数値でも良い(もちろん任意のオブジェクトもOK)
$(1).each(function() { console.log(this.valueOf()) });
数値の配列でもいい
$([1,2,3]).each(function() { console.log(this.valueOf()); });
要するに、$()の中が配列として扱えればそのまま、単数であれば
配列に変換して、それをjQueryオブジェクトでラップしてるだけ
jQueryプラグインを作ったことがあればわかるんだけど、
$(・・・).on()とか$(・・・).addClass()とか言ったjQueryオブジェクトの
メソッドが呼ばれたら、中でループして(配列に変換できるのでループは必ずできる)
一つ一つの要素に対して、その要素(DOM要素とは限らない)のメソッドを呼び出しているだけ
シンプルで汎用的な設計だから柔軟な使い方ができる。
DOM APIとの相性も良い(混ぜて使える)
DOM要素の配列
$(document.querySelectorAll('A'))
二重jQueryオブジェクト(普通はしない)
$($('A'))
数値でも良い(もちろん任意のオブジェクトもOK)
$(1).each(function() { console.log(this.valueOf()) });
数値の配列でもいい
$([1,2,3]).each(function() { console.log(this.valueOf()); });
要するに、$()の中が配列として扱えればそのまま、単数であれば
配列に変換して、それをjQueryオブジェクトでラップしてるだけ
jQueryプラグインを作ったことがあればわかるんだけど、
$(・・・).on()とか$(・・・).addClass()とか言ったjQueryオブジェクトの
メソッドが呼ばれたら、中でループして(配列に変換できるのでループは必ずできる)
一つ一つの要素に対して、その要素(DOM要素とは限らない)のメソッドを呼び出しているだけ
シンプルで汎用的な設計だから柔軟な使い方ができる。
DOM APIとの相性も良い(混ぜて使える)
2018/11/13(火) 10:55:45.16ID:???
次のプロジェクトからjQueryは重いから使うなって言われたんだが
便利なjQueryプラグインも使わないわけだよね
どうすんの?
便利なjQueryプラグインも使わないわけだよね
どうすんの?
2018/11/13(火) 11:34:52.58ID:???
2018/11/13(火) 14:02:30.05ID:???
>>550
CSSとサーバーサイドでなんとかする…
CSSとサーバーサイドでなんとかする…
2018/11/13(火) 17:19:01.79ID:???
>>551
俺も同じ感じでjQuery否定されてreactになった
俺も同じ感じでjQuery否定されてreactになった
2018/11/13(火) 17:29:20.72ID:???
>>550
なにに比べて重いのか明確にしてもらえ
なにに比べて重いのか明確にしてもらえ
2018/11/13(火) 17:30:32.20ID:???
ReactってjQueryより重いんだけどねw
しかもそのReactは将来性が危ういからなぁ
一部の企業でReact Native離れが始まる
https://tech.nikkeibp.co.jp/it/atcl/idg/14/481709/082000458/?ST=cio-appli&P=2
少なくともReactはNative使ってスマホアプリと
コード共有しないと意味がないね
そもそもスマホアプリがないならやる意味がない
しかもそのReactは将来性が危ういからなぁ
一部の企業でReact Native離れが始まる
https://tech.nikkeibp.co.jp/it/atcl/idg/14/481709/082000458/?ST=cio-appli&P=2
少なくともReactはNative使ってスマホアプリと
コード共有しないと意味がないね
そもそもスマホアプリがないならやる意味がない
2018/11/13(火) 17:31:19.84ID:???
jQuery+underscore.jsで小規模案件たいてい何とかなるよ。
個人的にはvue.jsとかもやるけども。
個人的にはvue.jsとかもやるけども。
2018/11/13(火) 17:32:34.11ID:???
2018/11/13(火) 17:33:06.35ID:???
みんなスマホアプリとか作ってるわけ?
2018/11/13(火) 17:34:46.98ID:???
使ってもいいけど、学習コストかかりますよ
とか言えば大抵流れるw
とか言えば大抵流れるw
2018/11/13(火) 18:04:32.36ID:???
>>554
たぶん気分が重くなるんだろう
たぶん気分が重くなるんだろう
2018/11/13(火) 18:28:07.33ID:???
jQueryでどんなことしてましたか?って聞かれて、開いたり閉じたり以外が思いつかなかった
クラスつけたりはずりたりもたまにやるけど…
みんなjQueryで何してるの?
クラスつけたりはずりたりもたまにやるけど…
みんなjQueryで何してるの?
2018/11/13(火) 18:28:33.20ID:???
>>560
使うなと言われる方が重くなるけどな
使うなと言われる方が重くなるけどな
2018/11/13(火) 18:32:44.12ID:???
>>561
それはjQueryっていうより、JavaScriptで何をしましたかの答えだと思うね
それはjQueryっていうより、JavaScriptで何をしましたかの答えだと思うね
2018/11/13(火) 18:33:37.65ID:???
ReactNativeはiOSとAndroidのコードを共通にするためのもの。
iOSとAndroid、だ。
Webとアプリではない。
Webビュー使った今までのクロスプラットフォームフレームワークと全然違うから突っ込まれないようにな。
React叩くときにうっかりReactNativeまで話を広げて自爆しないようにしよう。
iOSとAndroid、だ。
Webとアプリではない。
Webビュー使った今までのクロスプラットフォームフレームワークと全然違うから突っ込まれないようにな。
React叩くときにうっかりReactNativeまで話を広げて自爆しないようにしよう。
2018/11/13(火) 18:41:00.97ID:???
reactやvueとjQueryは相性悪いよね
両方使いたい場合は片方諦める?
両方使いたい場合は片方諦める?
2018/11/13(火) 18:46:03.68ID:???
reactやvueはDOM操作を直接やるなってやつだっけ?
DOM APIも使っちゃだめなのかな
DOM APIも使っちゃだめなのかな
2018/11/13(火) 18:54:56.07ID:???
はい。DOM APIも使っちゃだめです。
2018/11/13(火) 19:14:51.58ID:???
普通に使ってるが
2018/11/13(火) 19:19:19.65ID:???
相性悪いっていうか、jqueryが要らなくなるんだよ
vueのプロジェクト上でjquery読み込んでゴリゴリ作ったりできるけど、わざわざそんな事する必要がない
プラグインに頼りたいなら同居させても良いんじゃない?
vueのプロジェクト上でjquery読み込んでゴリゴリ作ったりできるけど、わざわざそんな事する必要がない
プラグインに頼りたいなら同居させても良いんじゃない?
2018/11/13(火) 19:23:16.34ID:???
>>568
DOM APIが使えるならjQueryも使えるんじゃね?
DOM APIが使えるならjQueryも使えるんじゃね?
2018/11/13(火) 19:23:54.31ID:???
わざわざそんな事する必要がないっていうのは
DOM APIを使用する意味がないってことね
DOM APIを使用する意味がないってことね
2018/11/13(火) 20:13:04.50ID:???
>>563
jQueryは世の中に出回ってるプラグイン、コピペ、開いたり閉じたりで
大抵のことができるからjQueryできますと言いにくい
だからといってゴリゴリのJavaScriptを要求されることはない
(´;ω;`)…
jQueryは世の中に出回ってるプラグイン、コピペ、開いたり閉じたりで
大抵のことができるからjQueryできますと言いにくい
だからといってゴリゴリのJavaScriptを要求されることはない
(´;ω;`)…
2018/11/13(火) 21:52:07.38ID:???
jQueryは一番はDOMを自由にいじれるのと、プラグインだよなあ
プラグインも素のjsに対応していないやつも多いし
プラグインも素のjsに対応していないやつも多いし
2018/11/13(火) 22:48:17.62ID:???
>>572
まぁjQuery得意です!っていう奴は大体他にアピールないことが多いから取りづらいわ…
まぁjQuery得意です!っていう奴は大体他にアピールないことが多いから取りづらいわ…
2018/11/14(水) 01:43:01.54ID:???
576542
2018/11/14(水) 04:30:07.53ID:??? >>545
画面の端からはみ出てもドラッグ距離を測れたらよかったんですが、やはり無理っぽかったですね…
その後別の問題が発生して
mousedownでaddClass('.dragging')→mousemoveで移動→mouseupで.removeClass('.dragging')
みたいな感じのこと(実際はもっと複雑)をしてるのですが
たまにmouseupを検知してくれず、ボタンから指を離しているのに.draggingになりっぱなしになってしまいます
何かこれを回避する方法ってあるでしょうか?
画面の端からはみ出てもドラッグ距離を測れたらよかったんですが、やはり無理っぽかったですね…
その後別の問題が発生して
mousedownでaddClass('.dragging')→mousemoveで移動→mouseupで.removeClass('.dragging')
みたいな感じのこと(実際はもっと複雑)をしてるのですが
たまにmouseupを検知してくれず、ボタンから指を離しているのに.draggingになりっぱなしになってしまいます
何かこれを回避する方法ってあるでしょうか?
577542 576
2018/11/14(水) 04:32:21.75ID:??? >>576 訂正
誤 mousedownでaddClass('.dragging')→mousemoveで移動→mouseupで.removeClass('.dragging')
正 mousedownでaddClass('dragging')→mousemoveで移動→mouseupでremoveClass('dragging')
誤 mousedownでaddClass('.dragging')→mousemoveで移動→mouseupで.removeClass('.dragging')
正 mousedownでaddClass('dragging')→mousemoveで移動→mouseupでremoveClass('dragging')
2018/11/14(水) 06:06:56.68ID:???
■ このスレッドは過去ログ倉庫に格納されています
ニュース
- 【芸能】「女性も嫌がってなかった、喜んでた」 石橋貴明を“擁護”する木下博勝氏に「性加害者の思考」の指摘 [冬月記者★]
- 加速する若者の「献血」離れ ★2 [ぐれ★]
- 【埼玉】「山岳部の生徒が滑落した」県立高の女子生徒が約100m滑落…意識不明で救急搬送 秩父市の御岳山で部活動中 [ぐれ★]
- 【自民】小泉氏 物価高対策 “現金給付や減税含む負担軽減策を” [ぐれ★]
- 【FC】クリアできんの…?《難しすぎたファミコンソフト》TOP10! 3位魔界村、2位ドラクエII、1位は伝説の? [湛然★]
- 【日本語】「親子丼」を「おやこどん」と読む人は20代と30代に多い…年代・性別・地域でも差が出る身近な食べ物の呼び方 ★3 [おっさん友の会★]
- 【実況】博衣こよりのえちえちRUST🧪 5
- 【悲報】石破茂「産経新聞のデマ記事に注意してください」 [616817505]
- 三三👊😅👊💥🏡💥👊😅👊三三
- 【実況】博衣こよりのえちえちRUST🧪 6
- アジア最大級のスタートアップカンファレンスSusHi Tech Tokyo 2025にイスラエルパビリオンが出展 人命救助技術など [377482965]
- 【訃報】この国のオワコン感えぐいよな [943688309]