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/ 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でええやん 色々なコードみたいからトリッキーなコードも書いてくれると嬉しい。勉強になる
でも最初に回答はしないであげてほしいw >>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() {
...
ごめん間違ってたので一部訂正w >>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) { Objectdから普通にできるよ
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に格納→AServletにjokenを引き渡す→Bservletにてjokenを使用してhtmlを作成しjspに返却(HTML内にマウスオーバーしたtdのidを格納)→Chtmlを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を吐かせて
調べて見たら治ると思いますよ ■ このスレッドは過去ログ倉庫に格納されています