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/ >>32
はい分離すべきです。
jQuery（JavaScript）とPHPのコードは混ざってはいけません。
そもそもJavaScriptのコードは外部ファイルにするものです。
つまりJavaScriptの中にPHPコードを入れることは出来ません。
タグに値を埋め込むか
<input value="PHPのコード">
<span data-value="PHPのコード">
変数定義だけのscriptタグ（※変数定義であってコードではないからOK）
<script>var data = "PHPのオブジェクトをJSON出力したもの"</script>
許されるのはこれだけです。 >>33
そして、jQueryを捨てられなくなるわけだな
依存先が変わっただけで問題は何も解決してない >>36
なにを使おうが、それに依存することに変わりはないので、jQueryだけの問題じゃない。
依存することからは避けられないので、一番楽なもの依存するのが良い。
JavaScriptのフレームワークはどれも将来性が危うい。
DOM APIが変わらなければjQuery APIも使えなくなることはない。
長く使えて安定していた。そしてこれからも安定しているjQueryが一番いい選択肢だよ。 Strutsで構築されるデータベースサイトを10万で請け負った。
もうちょっと取れたかな…。 >>39
安すぎワロタｗｗｗ
その10倍はいけるだろ。 >>37
DOM APIは実装が追いついてきているので将来的にはライブラリを使わずとも互換性を確保できる
ライブラリは用途に応じて使い分けるものでjQueryに依存だけに依存させる理由はない
君のやり方だとjQuery以外のライブラリは一つも使用しない事になるからな(jQuery以外は将来性が危うい)
>>33はブラウザ分岐コードが無くなる代わりにライブラリ依存する、ごく普通のトレードオフ jQueryは互換性を担保するためのライブラリじゃなくて
DOM APIよりも短い記述で目的を達成するためのライブラリだよ。
その前提が間違っている。もっと勉強してきなさい。 > 君のやり方だとjQuery以外のライブラリは一つも使用しない事になるからな(jQuery以外は将来性が危うい)
jQueryはDOM操作ライブラリなのだから、DOM操作以外は
別のライブラリを使うだけの話だろ。
お前じゃね？ jQuery以外のライブラリを使えないと思いこんでるのは。 >>45
俺はjQuery以外のライブラリも使う
だが、>>37はjQuery以外の将来性が危ういと思いこんでいるようだから彼からすれば他のライブラリを使えないだろう？ JavaScriptのフレームワークは、って書いてあるのに
JavaScriptのライブラリすべてって、思い込んでる所が
だめだよなぁｗ 数少ないjQueryの話題ができるスレなんだから
仲良くやってくれ >>34
2chのバグだろう
書き込み確認画面が出る際、" を使うと、そこで文字列の終了とみなされる。
" の代わりに、\" とエスケープすれば、どうだろう？
それか、書き込み確認画面が出たら、1度キャンセルすれば、確認画面は出ないようになった http://weboook.blog22.fc2.com/blog-entry-406.html
この記事を参考にさせてもらい、縦長ページの上部固定ヘッダーにメニュー(主にページ内リンク)を作ったのですが、メニューボタンを開閉する度にページの最上部に移動してしまい、メニューの役割を果たせません
メニューボタンを開閉してもスクロール位置が変わらないようにするにはどういう記述を加えたら良いですか？ >>52
おお、解決しました！ありがとうございます！
まさかこんな単純なことだったとは… href="#" とかいう手抜きはいい加減消えてほしいと思う。
サンプルプログラムはともかく、実際にはつかわないように。
間違った書き方だからこれ >>54
そういう時は正しい書き方も書こうよ
href="#top" >>55
そうとは限らないならなぁ。
実際には何もしないの意味で使っている人も多い。
何もしないつもりで書いたら一番上にいっちゃって、それを防ぐために
<a href="#" onclick="return false"> とか書くやつまでいる。
アホすぎ。 >>51
そもそも<a>で作っているのがおかしい
<button>だろう jQueryという言葉をしって5年
いまだによくわからない
いつしか調べる時がくるのだろうか
その日までアディオス >>51
<a href="#"> は IE6- で :hover がa要素にしか適用出来なかった時代の名残
今では問題ないのでa要素にする必要はない
<input type="button">
<button>
<span role="checkbox" aria-checked="false">
辺りが妥当か
特にWAI-ARIAは勉強するとわかりやすいマークアップになるのでお勧め そういや古いIEではa要素しかhover効かなかったんだな…
懐かしい通り越してすっかり忘れてた >>57 >>59
ありがとうございます！
勉強になります >>58
5年やって解らないのなら勉強方法がわ悪いと思う
jQuery以前にJavaScript(特にECMAScript, DOM)を習得する必要がある jQueryと平行してECMAScript・DOMを勉強する方が効率はいいよ すみません、教えていただけないでしょうか。
jspにてid=tasktableである表（全10行）を作成し、
それぞれの<tr>に1～10までのidを振っています。
ボタンを押すと、idが6以上となっている行を非表示とする
ボタンを作成したいのですが、ボタンのスクリプトに
$( すみません、途中送信されました。
ボタンを作成したいのですが、ボタンのスクリプトに
$("#tasktable [id >= 6]").hide();
と組み込んでも非表示化されません。
idの指定に、大小比較を組み入れることはできるのでしょうか。 idは非表示の為だけに振ってるの？
もしもそうならidは振らないでこれでいけるよ
$('#tasktable tr').slice(5).hide(); >>65
変わったことをやる時は検索したほうが早い
https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors
でまぁコードはこんな感じ
tmp = $("#tasktable");
$.each( tmp, function(){
if(!$.isNumeric($(this).attr('id')))
{
return true;
}
if($(this).attr('id')>5)
{
$(this).hide();
}
}) >>65
何れにしても判定しないと駄目
$('#tasktable tr[id]').each(function() {
$(this).attr('id') >= 6 ? $(this).hide() : void 0;
}); >>65
$(this).attr('id') >= 6 && $(this).hide();
この方がスリム わざわざそんなトリッキーなことしなくてもifでええやん 色々なコードみたいからトリッキーなコードも書いてくれると嬉しい。勉強になる
でも最初に回答はしないであげてほしいｗ >>65-66
HTML5 では数字から始まるidも許容されるが、論理的な名前を付ける方が好ましいと思う
https://jsfiddle.net/x7m5t4vr/ .prop("hidden", true); じゃいかんのか？ >>76
hiddenプロパティは何の要素ノードにある？ すみません、昨晩のメニューボタン開閉の者ですがまた行き詰まってしまいました。
例のメニューはwidth700px以下のみで現れるという仕様にしました。
そして、#menuの中にあるメニューをいずれかクリックすると、#toggleと指定されているメニューボタンもクリックされメニューが自動で閉じるということをやりたくて、複数のサイトを参照し見様見真似で以下の記述してみたら偶然上手く動作しました。
$(document).ready(function() {
$('#menu a').on('click', function() {
$('#toggle').click();
});
});
しかしこれだとwidth701px以上でも動作してしまうので、
$(window).resize(function(){
var w = $(window).width();
var x = 700;
if (w <= x) {
}
を加えたら良い気がしたのですが、いくつか推測で試しても上手く動作せず、どう組み込めば良いのか分からないので教えてください。 $('#tasktable tr[id]').each(function() {
$(this).prop('hidden', this.id >= 6);
}); >>78
cssで701px以上はdisplayhiddenとした方がいい。非表示のボタンが動作するのはほったらかしで良い
それだと効果のないボタンが残ることにならないか >>76,79
HTMLTableRowElement に生えてるのか、知らなかった
しかし、HTML Living Standard にもないところを見るに非標準プロパティのようだ
https://html.spec.whatwg.org/multipage/tables.html#the-tr-element >>78
function addEvent(){
if ($(window).width() <= 700) {
$('#menu a')
.off('click') // 重複するのでeventをoff
.on('click', function() {
$('#toggle').click();
});
}
}
$(document).ready(addEvent);
$(window).resize(function(){
setTimeout(addEvent, 300); // 連続処理になるので適当な時間を設ける
}); >>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の代替に過ぎない
正直要らない子だな ■ このスレッドは過去ログ倉庫に格納されています
