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/ >>83
function addEvent(){
$('#menu a').off('click') // 重複するのでeventをoff
if ($(window).width() <= 700) {
$('#menu a').on('click', function() {
...
ごめん間違ってたので一部訂正ｗ >>78
既存メニューの非表示は element.style.display === 'none' な要素ノードを探して hide()
しかし、classを付け外しする方が Selectors API で探せるし、現実的だと思うんだがな…
勿論、aria-hiddenやaria-checkedでもいい >>83,84で78の問題は解決したのですが、代わりにメニューをクリックしたときのスムーズスクロールが動作しなくなってしまいました…。
$(function(){
$('a[href^=#]').click(function() {
var speed = 400;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top - 50;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
}); >>86-87
画像はいいからHTML/CSS/JSまとめて https://jsfiddle.net/ にUPした方がいい >>86
そのイベントも$('#menu a').off('click')で削除されているので
#toggle. click()を関数にしてaddToggleのみ削除するようにする
function addToggle() {
return $('#toggle').click();
}
$('#menu a').off('click', addToggle); // addToggleのみ一旦削除
$('#menu a').on('click', addToggle) ; // 真の時のみaddToggleを追加 >>89
https://jsfiddle.net/qo688u62/
初めて使ったので上手くできてるか分かりませんが…。78にあたる部分は記述してない状態です。
>>90
すみません、超初心者なのであまり理解できませんでしたorz >>64-65
2chのバグだろう
書き込み確認画面が出る際、" を使うと、そこで文字列の終了とみなされる。
" の代わりに、\" とエスケープすれば、どうだろう？
それか、書き込み確認画面が出たら、1度キャンセルすれば、確認画面は出ないようになった >>92
なかなかいいね。いつも通り指摘してやろうと思ったけど、
細かい指摘点しか思い浮かばなかった。 誰も口だけ番長のアドバイスに耳を貸さないから黙っているといいよ >>92 >>93
ありがとうございます！無事解決しました！
他の方々もありがとうございました！ すみません、おしえていただけないでしょうか。
ajaxで以下の通りコーディングしようとしているのですが、
****のところに、他の関数で取得した値を入れたいと考えいます。
****に直接その関数を記述することはできるのでしょうか。
$.ajax({
url: すみません、きれてしまいました
すみません、おしえていただけないでしょうか。
ajaxで以下の通りコーディングしようとしているのですが、
****のところに、他の関数で取得した値を入れたいと考えいます。
****に直接その関数を記述することはできるのでしょうか。
$.ajax({
url: "Servlet",
type: "POST",
dataType: "text",
data: {content: ****},
success: function(data) { Objectｄから普通にできるよ
data: {content: (function() {})()}, 申し訳ありません、質問のコードに誤りがありました。
正しくは、data: ****,でした。
試しに文字列を返す関数を設定して以下のようにやってみたのですが、
dataに'hoge'が設定されません。
どこか記述に誤りがあるのでしょうか。
$.ajax({
url: "Servlet",
type: "POST",
dataType: "text",
data: $(function() {return 'hoge' ;}),
success: function(data) { data: (function() {return 'hoge' ;})(), data: {
hoge: (function() {
return 'hoge' ;
})()
},
下記と同じ
function hoge() {
return 'hoge' ;
}
data: {
hoge: hoge()
}, >>104
ありがとうございました。できました。
>>105
dataにはservletに送信するデータが入るという認識でした。
実際にservletをデバッグで止めたら値が引き継がれていました。
success:内のdataはservletから出力される値が設定されると
思っておりましたが、誤っていますでしょうか。 >>107ありがとうございます。
教えていただいたやり方で組み入れたところ、
無事dataにhogeをいれることができました！
ありがとうございました！
応用して、別の関数なのですが自身のidをcontent項目に設定させたいと思い、
以下のようにやったのですが、$(this).attr('id')でidを取得することができませんでした。
XXXは個別にDLしたプラグインの関数なのですが、そもそもの考え方として、
XXXが何であれ、「$("#table [id = '100']").XXX({」でidを
使っていることから、その下の「$(this).attr('id')」で
取得できるのではないかと思ったのですが、やはりXXXで処理している内容と関係があるのでしょうか。
あるいはただ単に取得の仕方が誤っているだけなのでしょうか。 >>109です
すみません、なぜか「postメソッドをつかってください」というエラーがでてコードを書きこめません。。。 >>109
$(this).attr('id')で参照している直下で
console.log(this);で何がthisなのかを調べたら解決すると思うよ
不明な場合はlogを吐かすこと >>109
this は呼び出された関数によって変わる
vall, apply, bind、コールバック関数等、関数の呼び出され方によっても変わる
jQuery#on なら event.curtentTarget に束縛されるし、jQuery.fn.pluginName ( === jQuery.prototype.pluginName ) が jQuery(selectorText).pluginName() で呼び出されるなら pluginName() 内の this 値は jQuery のインスタンスに束縛される >>114を訂正
× vall, apply, bind、コールバック関数等、関数の...
○ call, apply, bind、コールバック関数等、関数の... JavaScript, TypeScript の悪名高いthisは、文脈でコロコロ意味が変わる
AltJSでは、まともな Haxe を使うと天国 thisはバグの元なので、使わずに済むなら使わない バグの元になるのはJavaScriptを理解してないやつだけ
っていうかjQuery使うならばthisも理解ているのが普通 まぁ仕様って言い張られたら理解してないとしか言いようがないがね すみません、教えてください。表（tdのidに000～999までふられている）に対して、以下のことをやろうとしています。
①idが0で始まる要素にマウスオーバーしたら、そのidを取得し変数jokenに格納→②Servletにjokenを引き渡す→③servletにてjokenを使用してhtmlを作成しjspに返却(HTML内にマウスオーバーしたtdのidを格納)→④htmlをalertで表示
$(function() {
$("#table [id ^= '0']").mouseover(function(event) {
var joken = $(this).attr('id');
var html = "";
var deferred = ajax_function();
deferred.done(function() {
alert(window.hyo);
});
function ajax_function() {
var deferred = new $.Deferred();
$.ajax({
url: "Servlet",type: "POST",dataType: "text",data: {joken: joken}
}).done(function(data) {
window.hyo = data;
}).fail(function() {
console.log('fail');
}).always(function() {
console.log('ajax finish');
deferred.resolve();
});
return deferred;
}
});
});
ここでお聞きしたいのは、jokenにはマウスオーバーされたtdのidが設定されているのですが、ajaxを通じて帰ってくるdataを格納しているwindow.hyoにはマウスオーバーしたtdではなく、その直前にマウスオーバーしたtdのidが設定されています。
恐らく非同期の為だと思うのですが、マウスオーバーしたtdをwindow.hyoに確実に表示するにはどのようにしたらよいのでしょうか。 ajaxがちゃんと行われていればそのコードでも大きな問題はない気がするけどなあ。
ajaxがfailの場合にはwindow.hyoはセットされず、以前にセットしたwindow.hyoが表示されるけど、それは大丈夫？
（ajaxが失敗→failが実行[doneとは違ってwindow.hyoはセットされない]→alwaysが実行→alertが表示[window.hyoがセットされていないので以前にセットしたものが表示される]）
普通だったら、window.hyoを経由するのではなく、引数で直接dataを渡すほうがいい。
6~8行目
deferred.done(function(hyo) {
alert(hyo);
});
17~20行目
}).always(function(data) {
console.log('ajax finish');
deferred.resolve(data);
}); >>119
オレは理解しているけど、理解していない人間も
プロジェクト内にはどうしても出てくるし
だから社内規約でthisは使用禁止だぜ >>123
横からだが、this は文脈によっては役に立つものだから一律に禁止するのは理解しがたいな
例えば、prototype上のインスタンスメソッド内なら this は有効だろう
jQuery#each のコールバック関数内の this 等、ショートコーディングの為だけに引数に代替として this を使用しているのは論外だが eachのthisはsloppy modeで仮引数と挙動が異なる結果になるから使いづらい >>123
うちはプログラミングが禁止だ。
理解していない人間がいるから インスタンスメソッドはむしろ、thisを使わないと書けない
他にもコールバック関数を指定するビルトイン関数の一部(Array.prototype.forEach等)はthis値を指定できるな
逆にjQueryの.each()はthis値を指定できなくて不便な感がある
Function.protype.bindを使えばできるが、forEachと比較すると面倒くさい >>124
jQueryのイベントハンドラのthisはよくできてると思う。
DOMのイベントハンドラと同じ仕様になっているから
以降がしやすい。 >>130
イベントハンドラのthisは当時はDOM仕様になくて独自拡張だった
jQueryが普及してthisが一般的になった影響かDOM4で追従して標準化されたのが現在のthis
eventオブジェクトの互換性については良くできているが、this値については余計な事をしてくれた感があったな > jQueryが普及してthisが一般的になった影響か
関係ねーだろ。
互換性を高めるために仕様化しただけ
jQueryのせいにするな。
jQueryのおかげだというのなら別にいいがw イベントハンドラのthisはevent.currentTargetの代替に過ぎない
正直要らない子だな 逆
thisでいいからcurrentTargetがいらない
っていかDOMセンスないよな。
なんでよく使うものに、長い単語を割り当てるんだろうw DOM3 当時は listener オブジェクトがあるから this === event.currentTarget にしなかったのだと思う
document.addEventListener('click', {n: 1, handleEvent: function (event) { console.log(this, event.currentTarget); }}, false); thisは便利だし必要不可欠だぞ
thisをディスる奴は許さん forEachもそうなんだが、コールバック関数においてthis値は「異なるスコープから値を送り込む手段」の一つだからな
thisが予約されているとその手段が使えなくなる getelementBy～
getelementsBy～
考えたやつ死ね リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice) | Dustin Boswell, Trevor Foucher, 須藤 功平, 角 征典 |本 | 通販 | Amazon
https://www.amazon.co.jp/dp/4873115655
ショートコーディングにしか目が向いていない人にこそ読んでほしい本 >>140
リーダブルとは関係ない話
長い名前をつければ読みやすいってわけじゃないんだから。
逆に冗長な名前は読みにくい。 >>124
それでも原則として禁止だよ
どうしても必要なときはしょうがないけど >>142
そうすると、prototype拡張するPolyfillは利用禁止
下記コードも禁止扱いとなるが、それらのコードは使わないで運用するという事かな？
function Hoge (a, b) { this.a = a, this.b = b; }
Hoge.prototype.sum = function sum () { return this.a + this.b; };
console.log(new Hoge(1, 2).sum()); // 3
prototype系全般が利用禁止なのは不便で仕方ないと思うのだが、クロージャを使って似たような事をやっていくつもりなのか… 頼むから個々のローカル・ルールを議論しないでくれよ ○○禁止みたいなルールは、バカ向けのルールであって
どういう場合にでも当てはまることはほとんどないよ。
長い名前が必ずしも読みやすいとは限らないし、
短い名前が必ずしも読みやすいわけでもない。
状況によって変わるもの
バカはその状況の判断ができない。
だから何も考えなくて済む単純なルールを作る、欲しがる。
バカだから何も考えない。考えたくなーい（笑）
単純なルールを言う奴は無視しましょう Kotlin では、すべてのオブジェクトが使える、スコープを変える関数が、4つある
apply, let, run, with
with(obj){
ここでは、thisが、objに変わる
} >>143
バッチリ禁止やね
Javascript出来ます！ って胸張ってる人に合わせるということは
つまりそういうことなんよ。 ルールはアホを縛るためにあるんでね アホを縛ったとしてもアホが賢くなるわけじゃない。
アホがいる限り、アホのレベルに落ちる。 まあぶっちゃけ普通のサイト作成で自作コンストラクタを使う機会なんて滅多にないし、this禁止でもなんとかやって行けるか >>147
学習させようという気はなくて全員をアホのレベルまで落とす方向なのね
小規模コードならそれでもいいだろうけど、車輪の再発明を繰り返しそう >>152
逆だよ
大規模コードになると人数が増えるし
人数が増えればどうしたってアホが混じってくるんだよ
そんなときアホ共に車輪を再開発させないための縛りだ 内輪で「これ、あれ、そこ」と同じ
理解できると速いんだけどね そしていつの日か、その会社では何語とも呼べない奇怪なやりとりが飛び交うようになっていたのである jQueryを使ったJavaScriptのプログラムを使おうと思ったら、
Chrome系で使えない状態です。Parallaxのプログラムです。
そのプログラムは3年前に書かれたようなんですが、
作者に問い合わせたら当時は動いていたそうです。
EdgeやFirefoxでは問題なく動いています。
3年前と今ではChromium系ではJavaScriptが大きく変わったのでしょうか？
どんなところを修正すれば、治せそうでしょうか？ >>156
どんなところが動かないかlogを吐かせて
調べて見たら治ると思いますよ >>156
jQuery本体、最新版を読み込んでるなら当時のものを読み込むようにする
大きいところではlive()が無くなってたりする
>>157の通り、コンソール見れば
Uncaught TypeError: $(...).aaa is not a function
こんな感じでエラーが返ってるはず Chromeの開発者ツールを起動して、デバッグすればいい EdgeやFirefoxでは問題なく動いてるっていうのならjQueryの問題じゃないだろう。
EdgeであるならChromeとそう変わらないんだからjQueryの範囲で
ブラウザ依存の問題が発生することはまずないだろう。
だからjQueryとは直接関係ない部分に問題があるとみて間違いない キャッシュでも効いてるんじゃないか
それか拡張機能と何か干渉してるか 教えてください。
要素のIDを取得する場合は、
var idname = $(this).attr("id");
でできるのですが、$(this)の背景色を取得する場合はどうしたらよいのでしょうか。
idをbackgroundcolorやcolorに変更してもできませんでした。 >>162
// スタイルシートから
$(this).css('background-color');
// 要素から
$(this).style('background-color'); >>162
寝ぼけて間違っていたわｗ
$(this).css('background-color');
これでいける ハイフンが足りなかったのですね、、、
どうもありがとうございました！ 皆さんありがとうございます。
>>157
jQuery1.11.1.jsだとr.handleというところが引っかかるようですね。
CallStackの所にこれが表示されます。
jQueryのバージョンを変えるとこれは出なくなりますが動きません。
>>158
元のソースではhttps://code.jquery.com/jquery-latest.min.jsで取り込んでました。
今開くとver.1.11.1のようです。
1.0から順に1.12.4まで入れ替えてみましたが反応しません。
>>161
検証用にGoogle Chrome Canaryをダウンロードしてみました。
拡張機能も空にしてあります。
>>160
シンプルにこれ一つのスクリプトしか使ってないので、
コンフリクトが起きているわけではないようです。
CSSも弄ってみたのですが変化がありません。 >>166
> jQuery1.11.1.jsだとr.handleというところが引っかかるようですね。
> CallStackの所にこれが表示されます。
そのポイントを精査して何が不整合の原因かを調査しないと進まないよ ブラウザの開発者ツールを起動して、1行ずつデバッグする。
エラーメッセージを取得して、それで検索する
動きませんと書いても、エラーメッセージが無いと、他人にはわからない ChromeでMacだと問題なくて、
Winだとエラーも出さず無反応の場合、
何が考えられますか？ 一番めんどくさいパターンだなｗ
コンソールで追いかけるしか無いと思う
開発ツールのsourceを開いて{}をクリック
適当にブレークポイントをかましていこう HTTPでのデータアップロードの進捗状況 35 MB/100 MB (800 kB/s)的なものを
表示するのをjQueryで出来たりしないかななんて思ってるですが、そもそも
ソリューションとしてjQueryを選ぶのはあってますでしょうか？ >>172
方向性はあってるのですね
そこを参考に頑張ってみます
レスありがとうございました すみません、教えていただけないでしょうか。
「all_offというチェックボックスを押すと、name=jikan-checkに当てはまるチェックボックス（以下チェックボックス群）を全てチェックオフとする」ようなコードを作成しました。
そこまでは正常に動いたのですが、チェックボックス群がチェックON→OFFになったことの検知ができません。
「('#select-form input[name=jikan-check]').on('change'～」が該当の箇所なのですが、どこか誤りがあるのでしょうか。
console.logも入れて試したのですが、changeに入った形跡がありませんでした。
jQuery(function() {
jQuery('#select-form input[name=jikan-check]').on('change',
function(e, param) {
省略
}
).change();
}); 続けてチェックボックス群になります。
【html部分】
<form id="select-form">
時間：
<label>
<input type="checkbox" name="jikan-check" value="J60" checked="checked" />
60H
</label>
<label>
<input type="checkbox" name="jikan-check" value="J80" checked="checked" />
80H
</label>
</form>
<div class="allCheck">
<label><input type="checkbox" id="all_off" /> Check 外す</label>
</div> Check 外す
はボタンだろう。これがチェックボックスはわかりづらい
チェックボックスでいくなら
jQuery('#select-form input[name=jikan-check]').on('change',
//ここにifをかます。input[name=jikan-check]にチェックがついてない時
if( ){
//後は処理
function(e, param) {
省略
} jQuery('#select-form input[name="jikan-check"]').on('change', function(e, param) {
console.log($(this).prop('checked'));
}).change();
意味がよく解らないけど、こういうことかな？ >>174
> 「all_offというチェックボックスを押すと、name=jikan-checkに当てはまるチェックボックス（以下チェックボックス群）を全てチェックオフとする」ようなコードを作成しました。
そのコードがない <input type="checkbox" id="all_off" />
これはbuttonにするべきだね、意味が無いよ all_off と言いつつ all_on でもある 以下のように、離れた場所にscriptを書いた時
実行される順番は保証されていますか？
何かの原因で
console.log(2);
console.log(1);
となることはないでしょうか（IE9以前などの古いブラウザは考えなくても良いです）
<script>
$(function(){
console.log(1);
});
</script>
<script>
$(function(){
console.log(2);
});
</script> >>181
jQuery3以降だと$(function())は
何らかのエラーが有るとスルーするよ >>182
おー、なるほど。ありがとうございます！ ■ このスレッドは過去ログ倉庫に格納されています
