jQuery 質問スレッド vol.7 [無断転載禁止]©2ch.net
■ このスレッドは過去ログ倉庫に格納されています
JavaScriptでDOM用ライブラリであるjQueryのスレです。
このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。
jQueryを使って作る側のスレであって、こんなプラグインありませんか？と聞くスレではありません。
そういうのは自分で探してください。
ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。
JavaScriptの質問は関連スレで質問して下さい。
■前スレ
+ JavaScript & jQuery 質問用スレッド vol.6 +
http://echo.2ch.net/test/read.cgi/hp/1465566635/
■関連スレ
+ JavaScript の質問用スレッド vol.122 +
http://echo.2ch.net/test/read.cgi/tech/1472426483/
+ JavaScript(ECMAScript)質問用スレッド vol.122 +
http://echo.2ch.net/test/read.cgi/tech/1472401404/
+ JavaScript の質問用スレッド vol.131 +
http://echo.2ch.net/test/read.cgi/hp/1478053599/
JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465399470/
+ JavaScript & jQuery 質問用スレッド vol.6 +
http://echo.2ch.net/test/read.cgi/hp/1465566635/ ユーザーに受け入れられる2ch代替サービスが現れないにはなぜなんだ
2chがブラックということはみんなわかってる筈なのに >>554
1000で終わるシステムなんてめんどくさいだけだよ
ブラックが好きな人が残っているだけ >>554
2chは古臭いシステムで真似するメリットがまるでないから
質問掲示板としてはstackoverflowが頭一つ抜けて優秀な印象だな すみません、わかる方がいらっしゃれば教えてください。
表の画面表示が完了したところで、表の各行にプログレスバーを追加するスクリプトを実行したいのですが、
「表の画面表示→プログレスバー追加スクリプト実行」ではなく、
「画面真っ白→しばらくたってからプログレスバーが追加された状態で表が画面表示」
となってしまいます。
参考になりそうなサイトから以下のようにコードを作ったのですが、
「表の画面表示→プログレスバー追加スクリプト実行」としたい場合、どのようにすれば良いでしょうか。
<html>
<body>
<table id="target">
～略～
</table>
</body>
</html> <script>
var target = $('<table id="target"></table>');
target.ready(function() {
プログレスバー追加処理
});
</script> >>558です。
スクリプト部分にwindow.onload や jQuery(function() { を
試したのですが、どうしても「画面表示→スクリプト実行」ができなくて、
実現方法をさがしている際に>>558のようなコーディングをしている
サイトにあたり、とりあえず試してみた次第です。
window.onload や jQuery(function() { では
「画面表示→スクリプト実行」はできないのでしょうか。 >>561
出来てるから、出来ないコードを出しなさい。
jQuery(function () {
alert('スクリプト実行');
});
動的に挿入されるDOMノードは動的処理の中で上手くやりなさい。 >>557です。
ありがとうございます。
表の作成処理は>>557の通りです。
スクリプトは以下のようにしていますが、
「表の画面表示→プログレスバー追加」にはならず、
画面表示までしばらく真っ白な画面のままで、
プログレスバーが追加された状態で一気に表が画面表示されます。
スクリプトは以下の通りです。
$(window).on('load',function(){
プログレスバー追加処理
});
ちなみに>>558でも同じ現象でした。 onloadは表示されたではなく必要なリソースの読み込みが終わっただからね
たいていのブラウザはページ読み込み時は表示開始に若干ディレイかけて高速化してるし
バカでかいテーブルだとレイアウト計算に時間かかったりするし
タイマーで適当に遅延させればいいんじゃない？ >>563
プログレスバー追加処理がないようだが…。
非同期処理なのでは？ cssのtable-layoutをいじれば何とかなりそう
テーブルの幅、各セルの幅、バー含むセルの中身などによるからその辺ほぼ全文見ないと何とも言えん https://www.w3schools.com/howto/howto_js_accordion.asp
このサンプルでは、クリックしたSectionがどんどん開いていきます。
それを、どれかのSectionを開いたら、今開いているSectionが閉じるようにしたいのですが、
どうすれば良いでしょうか？ クリックしたら一旦全部閉じる処理をして
同時にクリックした奴だけを開けば良いんだよ semooh.jpまだ生きてたのかよ
一刻も早く滅んで欲しい jQuery＋関数で検索するとよく引っかかるんだよな
内容考えるから更新してほしいわ 基本、公式サイトしか読まないからどうでもいい
日本語のサイトはどれも信用してない
自己検証すれば、ある程度は気が付けるレベルだしな 教えてください。
4月～翌年3月までのラジオボタンを作成しました。
<input type="radio" name="month-radio" id="btn_sel_MM"
/>（MMには月が2桁で入る）
それぞれ name="month-radio" とし、IDで差異化しています。
行いたいことは、現在の日時を取得しその月のボタンをjavascriptで疑似的にクリックさせることで
クリックイベントを発生させることです。
その疑似的なクリック処理を
$('#btn_sel_10').trigger('click');（例：10月を疑似的に選択した場合）
でやったのですが、イベント受け取りの
$(function() {
$('#select-form input[name=month-radio]').on('click keydown
keyup keypress ', function(e) {
});
～処理～
});
で受け取ることができません。
（月ボタンは10月が選択されていますが、クリックイベントが発生しない。）
わかる方がいらっしゃれば、教えていただけないでしょうか。 うまく動かない時はコードを短くして原因を絞り込むと良いと思う
これじゃダメ化
$('#select-form input[name=month-radio]').on('click', function(e) {
});
～処理～
}); 574さん
早速ありがとうございます。
それもやってみたのですが、だめでした、、、 $('#select-form input[name=month-radio]').on('click keydown
keyup keypress ', function(e) {
alert('xxx');
});
}); 577さん
ありがとうございます。
click keydown keyup keypress
もやってみましたが、やはりイベントを受け取らないようです。 $('#btn_sel_10').trigger('click');
でイベント停止か何かしてないか あとこの場合は、changeイベントを捉えるだけで良いと思うけど 581さん
本当ですか、自分のコードをもう少し簡略化して、試してみます。
最初はchangeでやっていたのですが、不要なところでイベントが何回も発生してしまって、やむなくclickに変更した次第です。 >>583
> 不要なところでイベントが何回も発生してしまって、やむなくclickに変更した次第です。
これなぁ、こうなるからtriggerは使わないほうが良いよと
書こうと思ったんだよ。楽になることもあるから言わなかったけど。
これ以外にもtrigger多用してない？
だったら関数を作って、その関数を直接呼ぶ or イベントハンドラにしたほうがいいよ jQueryをjapanQueryみたいに国産のものと思っていたのは私だけですよね？ <script src="file.js">
window.onload = function () {
initFunc();
};
</script>
こういう書き方をしても実行出来ないようですが、これはダメですか？ >>586
ダメです
srcかインラインどちらかで >>587
レスありがとうございました。
なぜ出来ないのでしょうか？
こういう記述をしても自然な感じだと思うのですが。 >>588
実は俺も同じことを考えたことがあるけど、仕様と納得するしかない
そこを考えても時間の無駄だぞ document.addEventListener("mousemove",や .on("mousemove",
でマウスの動きを取得したいのですが、
Googleアドセンスなどの広告の上をマウスが動くとイベントが来ない場合があります。
広告の上でも確実にイベントを取得する方法はありますか？ 広告上のイベントが拾えないのは、たぶんiframeになってるせい。
(スタイルやスクリプトの干渉を嫌ってるのかしらんが、結構よくある。二重三重になってることも)
で、iframe内部のイベントの伝播は内部のdocumentで止まるし、広告ってことはクロスドメイン制限で内部へのイベントハンドラ設定も不可だろうから、mousemoveイベントを拾うのはかなり厳しいんじゃないかと。
何がしたいのかわからないからなんとも言えないが、iframe要素のmouseenter/mouseleaveは拾えるはずなので、それで事足りるのであればこちらで。 >>591
なるほど、ありがとうございました。
目的は単純な実験です。マウスを動かすとその軌跡に沿って画像が動くなど。 広告の上を覆うような透明な空ボックスでも追加しとく それ考えたけど、多分色々なところで弊害が出ると思う >>596
mousedown のタイミングでボックスを外すとかでうまくいかないかな
で、 1秒後に復活
ちゃんと広告に click 発火されるかあやしいが >>596
君、頭いいな。
実験結果を教えてくれ。 質問です
validate engineで画面の入力チェックをしているのですが、
submit以外のタイミング、例えば特定のボタンを押された時に、
formのある一部分、たとえば特定のsection単位でvalidate engineを発動させたいです
formでsubmitのタイミングで…というのはできてるのですが、
上記のように使用するにはどうしたらいいんでしょうか？ ちなみに最終的にはformの全ての内容をsubmitしてDB登録にいきます なんかまたjQueryプラグインにする必要がない物を
jQueryプラグインにしている臭がするな 数行のためにjQueryを読み込みするのは無駄な行為だと先生に注意されたのですが具体的にどの変が無駄なのか教えて欲しいです >>602
jQueryは主にDOM操作などの生産性を上げるjavascriptライブラリ
数行なら生産性の向上は殆ど見込めないから無駄 >>602
具体的に説明。
影響があるのは何Mといった大きなjQueryの内容を使うスクリプトやサーバー管理者です。
一件のjQueryを読み込む程度なら気にする必要はありませんが、アクセス数の多いウェブサイトだと必然的にjQueryのリクエストも増えます。
その結果、サーバー稼働率・負荷上昇に繋がります。
サーバー性能が良ければさほど気にする必要はありません。
ですが少しでも快適にするためには無駄を省く必要はありますよ。
ちなみにCDNは接続できない地区またはブロックされることもあります。日本でも繋がりにくいときもありますので業務用としてはお薦めできません。 >>602
少しならネイティブ
簡単なものならjQuery
大きなものならもっと便利なものあるから探して使え
jQueryは旧バージョン使われなくなったらｵﾜｺﾝになるかもな クリックされた要素と、その次の要素をセレクタにしたいと考えています。
thisと次の要素となると思うのですが、どのように指定すればいいのでしょうか？ >>607
ありがとうございます。
単体ではなくthisとthisの次を、まとめて記述できたらいいなと思っているのですが、
方法はありますか？
↓のような感じで･･･
$(this, thisの次)... 初心者ですが質問したいです。
・①社員番号と名前の
セレクトボックスがあります
・②セレクトボックスが選択されたら
社員番号、名前、メールアドレス、電話番号
を下に表示する
・非同期通信（その他大量の項目編集中の一部のため）
画面起動時①のセレクトボックスを作成しています。
Ajaxで①でセレクトされた社員番号から、
社員情報を取得して②を描画、が一番楽ですが、
すでに①のセレクトボックス作成時にその情報は横並びで持っているんです（メールアドレス、電話番号）
Ajaxでわざわざdbアクセスしなくても
jqueryだけで表示することはできますか？
セレクトボックスに隠しで持たせることなどできるのでしょうか？
わかりにくかったらすいません
よろしくお願いします。 >>608
目的がよく分からないけど
統合したいなら配列にして参照したら？
var elem = [this, this.nextSibling];
>>609
持ってきたデータを変数に代入しておいて使ったら？ >>610
hiddenで画面に全て隠し持つってことですか？
それともselectのoption内に隠し持てたりします？
普通のアプリケーションだと当たり前のことが
webだと値の保持ができないので
どうしたらいいのかな？と。 >>612
hiddenを使うこともできるし、jQueryを使えば
各要素に関連したデータを持つための
data()メソッドというものがある >>610
たびたびどうも。
教えていただいたのを試してみましたが、自分ではできませんでした。
すみません･･･
セレクタの
$(this)...
と
$('+p',this)...
をまとめて記述する方法ってないのでしょうか？
thisがあると別個でなければ駄目とかなんですかね？ >>615
しつこい。こっちに答え書いてあるだろ
+ JavaScript の質問用スレッド vol.129 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1456242505/681-682 >>610ではないが「持ってきたデータを変数に代入しておいて使ったら？」がなんでスルーされてるかわからん
データが膨大でできないとか？ >>609は「情報は横並びで持っている」というが、どこに持っていて、どこまで理解していて、何に悩んでいるのか、が不明なので答えようがないな。
回答よりも質問の不備が目立つ。 >>606
そもそも、クリックされた要素はセレクタで指定出来ないわけだが、thisとセレクタを混同してないか？
jQueryオブジェクトを統合したいならadd
https://api.jquery.com/add/ >>620
セレクトボックスを作成する時の
Arraylist（サーバーから取得した値）に、
社員番号、名前、メールアドレス、電話番号を持ってるという事です
そのArrayListをforeschして、社員番号をセレクトボックスのオプションのvalueに
名前をテキストに表示して作っています。
せっかくメールアドレスも電話番号も持ち合わせてるのですが、
セレクトボックスで値を変えるたびにajaxで社員番号をキーにメールアドレスと電話番号を取得するのは
イケてないのかなぁと思ったんです。
うまく説明できなくてすいません。 >>613
さんのカスタムデータ属性が使えそうだな！と思っています。 Arraylistが全データなんでしょ？
それなら>>610の言うようにキャシュしておいて使えば済むと思うが あくまでArraylisが他で更新されないことを前提でね
もしも他での更新をリアルタイムで反映させたいなら毎回持ってくればいいんじゃないの？ >>622
そのセレクトボックスは単一選択だよな？
各optionにvalue="数値"（またはindex()）で、それ取得してそのままArraylistのインデックス
$('①').change(function(){
②を実行
});
あとdata()はjQueryがキャッシュ使うのでリアルタイム性には注意な >>625
を理由に毎回Ajaxで持ってくるようにします。
その方が組むのが楽ですね。
私がwebに初心者すぎるのが原因かと思いますが
キャッシュしておいて…みたいなのは
サーバ側でキャッシュデータとして登録しておいて
Jquery側のファンクションでキャッシュデータの読み込みができるってこと？
キャッシュデータの読み込みをajaxでやるっていうこと？
画面のhiddenに持つってことではないですよね？（これはいや） プラグイン作りの勉強をしています。
基礎的なことなのですが、プラグインの関数内で
呼び出し元のIDを表示するにはどうすれば良いのでしょうか？
$.fn.test = function() {
var id = $(this).attr('id'); //testを取得したい
alert(id);
};
$('#test').test();
これでは駄目でした >>631
これだと確かに実行されるのですが、自分の環境だと駄目です。（undefinedになる
環境と言ってもchromeで実行しているだけですが・・・
（あと、jQueryのバージョンを変えても同じです わかりました。もしかしてプラグインって<head>内に入れちゃ駄目なんですかね？
>>630のソースを</body>の前に書いたらアラートで「test」が表示されました。 >>633
そんな事はない
jQuery(function () { }); で括れば動作するが、プラグイン以前の問題だな
https://api.jquery.com/jQuery/#jQuery3 >>634
ほんとですね・・。
(function($) {})(jQuery);
で括っていたのが良くなかったのかもしれません。
もう少し基礎から勉強します。ありがとうございました。 > (function($) {})(jQuery);
> で括っていたのが良くなかったのかもしれません。
まったく関係ない
プラグインの作成自体はよっぽど変なものでない限り、
jQuery読み込みのあとならどこでも良い。もちろん<head>でもよい
ただ<head>に書くなら（正確に言うならば<タグ id="#test">登場以前に書くなら）
$(function() {
// Document is ready
});
を使わないとDOM構築前に実行されてしまうから見えないだけ あとな、例外的なプラグインもあるからあえて言わなかったんだが、
$('#test').test(); だけではなく、$('.test').test(); こういう風に
複数の要素にマッチする場合でも逆に全くマッチしない場合でも動くように作るのが良い
そしてチェーンできるようにするべき
だからこのサンプルのように、複数の要素に対して処理を適用してreturn thisするのが王道
※プラグインにおいてthisはDOM要素ではなくjQueryオブジェクトであることに注意
つまり>>630のように$(this)とする必要はない
https://learn.jquery.com/plugins/basic-plugin-creation/
$.fn.greenify = function() {
this.css( "color", "green" );
return this;
}
もしくは、複数の要素に対して一要素ずつ何かの処理を適用したい場合は、
eachでループするこっちのパターンもおなじみ
$.fn.myNewPlugin = function() {
return this.each(function() {
// Do something to each element here.
});
}; >>636-637
詳しくありがとうございます。
$(this)としていたのは、ID名をどうやって取得するのか？と思ったもので。
それで
var id = $(this).attr('id');
こういう書き方自体は間違いではないのかな？っと。
var id = this.attr('id');
こういう書き方の方が良いんですかね。 >>638
この場合はthisでええんやで$()は不要
通常のDOMオブジェクトではなくてjQueryオブジェクトで参照されるから >>639
わかりました。ありがとうございます。
引き続き勉強していきたいと思います。 >>629
どうにでもできるし、楽さはどれもさほど変わらない
自分がどうしたいかだけで毎回取得したいならそうすればいい
常に最新データを求めるならそうすべきで、その必要がないのなら冗長
サーバサイドならPHPの方が楽だしセキュリティ上有利 tableタグでクリックされた要素の次に来る要素をセレクタとする場合、
trをまたいでいる場合の簡単な指定方法はありますか？
↓でthをクリックしたらtdを選ぶ。としたいです。
<table>
<tr>
<th>...</th>
</tr>
<td>...</td>
<tr>
</tr>
</table> > クリックされた要素の次に来る要素をセレクタとする場合、
セレクタってなんですか？ >>642
tdの位置が明らかに文法違反
セレクタ云々も用語の不理解が見られる
>>621と同じ指摘をする必要がありそうどな >>642
>>644のいうように文法おかしいけど
tableを起点で参照
$(this).closest('table').find('td');
親のｔｒから参照
$(this).closest('tr').next('tr').find('td'); >>645
素晴らしいセレクタありがとうございます。 jQuery APIの事をセレクタと表現してるのか
セレクタの意味を調べ直すべきだな >>642
HTMLはjQueryより難しいからな
よく見直せ >>639
便乗質問なのですが、$(・・・)のいらないthisだけでいい「この場合」とはどういう場合をさすのでしょうか？ >>651
jQuery.prototype 上の関数の場合 ■ このスレッドは過去ログ倉庫に格納されています
