jQuery 質問スレッド vol.7 [無断転載禁止]©2ch.net
レス数が1000を超えています。これ以上書き込みはできません。
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/ > JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
これだけ「無断転載」を削除し忘れた 乙
手元の専ブラだとスレタブにjQueryとだけ書いてあって大変わかりやすい 乙、JavaScriptスレも前後の + を削除していいんじゃないかと思った
昔からの伝統なのかずっと入ってるけど、タブを見るときに邪魔なのよね 見た目のセンスの悪さは置いとくとしても、プログラム関係なんだからしょーもない無駄は省いて欲しい JavaScript(ECMAScript)スレも名前が紛らわしいよな
普通にECMAScriptスレでいいのに あら、JavaScriptスレも立てられたのね
乙 関連スレで "[無断転載禁止]©2ch.net" を削除すると見やすいな
スレ立て時にはタイトル編集が面倒だけど、是非続いてほしい imgurとかの画像をimgのsrcに入れる前にファイルサイズを取得する方法はありますk 言ってる意味が分からんが「jquery ファイルサイズ 取得」当たりでぐぐれば回答っぽいのが出てくると思うぞ a要素をクリック時、ページ遷移しないようにするには
onclick="return false;"
とインラインで入れるしか無いでしょうか？
別のfunctnion()を走らせてからreturn falseではページ遷移してしまいます
<script>
$(function(){
var f = function (){
alert('massage');
return false;
$('a.test').on( 'click', f );
}
});
function click_a(){
return false;
}
</script>
<a class="test" href="./">|function return false|</a>
<a class="test" onclick="return false;">|onclick return false|</a>
<a class="test" onclick="click_a()">|onclick click_a()|</a> >>14
方法はいろいろあるよ。好きな方法をお試しあれ。
[1] onclick内でさらにreturnする。
関数click_aでfalseをreturn → それをonclickで更にreturnするという流れ。
<script>
function click_a(){
return false;
}
</script>
<a class="test" href="./" onclick="return click_a();">リンク</a>
[2] 併記する。
<script>
function click_a(e){
}
</script>
<a class="test" href="./" onclick="click_a();return false;">リンク</a>
[3] preventDefault()という関数を使う。
<script>
function click_a(e){
e.preventDefault();
}
</script>
<a class="test" href="./" onclick="click_a(event);">リンク</a> あ、もちろん、動的に関数をclickイベントに登録したなら関数内にreturn false;だけでもおｋだよ
（>>14のコードはちゃんと動的にclickイベントに登録できてない。）
<script>
function click_a(e){
return false;
}
$(function(){ $("a.test").on("click", click_a); });
</script>
<a class="test" href="./">リンク</a> >>15
ありがとうございます！
めっちゃ早くて助かりますｗ >>14
return false はバブリングも停止してしまう
デフォルトアクション抑止が目的ならevent.preventDefault() を推奨する IEじゃ、event.preventDefault() は効かないから
return false の方が無難 >>19
非対応ブラウザ向けにjQueryが補完してくれるはずだが…
とはいえ、IE8-をサポートする必要性はかなり低くなっている jQuery 1.x系は新機能追加はされず、今後はbug fixのみ
IE8はMSのサポートが切れており、セキュリティ上危険なブラウザ
積極的にサポートする理由はもうないよ クライアントの鶴の一声という理由がね・・・あるんだ・・・
金額が倍になってもやれっていうんだ・・・どういうことだ・・・ 図書館の館内検索みたいな閉ざされたシステムだと平気でIE6とか使ってるからな しかもIE6専用、それ以外のブラウザは一切使えないとかね
今もあるのかなぁ。あるんだろうなぁ 少なくともJavaScriptの範囲内においては
jQueryを使っておけばIE6でも動くようにすることはできる。 IE6対応なら jQuery 1.12で更新が停止しているな
クライアント希望なら仕方ないが、それでも jQuery 1.12 上で event.preventDefault() を使えばいいだろう
(DOM APIで書くとしたら event.preventDefault と event.returnValue を使い分けるが) > (DOM APIで書くとしたら event.preventDefault と event.returnValue を使い分けるが)
そういった本質的じゃないコードは書くべきじゃないね。
IE6を将来捨てるためにjQueryを使うべき IE6を切り捨てるのは event.preventDefault 一本化で終わりなんだが、何を言ってるんだ、この人は？ 将来的には捨てるけど、いますぐ捨てられないって話をしている。
捨てるときにコードを書き換えるとかありえない。 ＞捨てるときにコードを書き換えるとかありえない。
これやりたいよね・・・
不要なコードは一旦全部消してリファインしたい DBの特定データをphpで出力し、
jQueryで動きを付ける場合、
jQuery記述の変数部分にphpの記述が混在するカタチになりますが
こういうのは良くないですよね？
無理にでも分離すべきでしょうか >>31
俺が言ってるのはブラウザを切り捨てる時の話ね。
ブラウザを切り捨てて、特定のブラウザ専用のコードは
不要なコードになるって話なら、jQueryを使っていれば
そういうコードはライブラリに含まれるので、
最初から不要なコードが入らない。 >>32
jQuery（JavaScript）とPHPのコードは混ざってはいけません。
そもそもJavaScriptのコードは外部ファイルにするものです。
つまりJavaScriptの中にPHPコードを入れることは出来ません。
タグに値を埋め込むか
<input value= >>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の代替に過ぎない
正直要らない子だな 逆
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
おー、なるほど。ありがとうございます！ var result;
$.ajax({
type: 'GET',
async: false
}).then(function(html){
result = $(html).find('span')).text()
});
console.log(result);
こういう同期もjQuery3以降だとできない あれ同期できなくなったの？
たまに使うんだけど・・・ https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
ここらへん読めばわかるけど、そもそもAjax通信の同期処理は推奨されない。
非同期に比べてパフォーマンス悪いし、制限や注意点満載。
将来主流になるとみられるFetch APIも非同期しかできないはず。 👀
Rock54: Caution(BBR-MD5:0be15ced7fbdb9fdb4d0ce1929c1b82f) というか、JavaScript自体が非同期なんだよ 初心者です。もしわかる方いたら教えてください。
下記URLで紹介されているプラグインを使用し、入力フォームにて
日本語入力を行うとふりがな、ローマ字に自動変換できるようにしています。
https://github.com/heeesa/autocomplete_romaji_hiragana
Chrome、IE（※）、EDGEでは問題なく動くのですが
fixefoxだけ日本語を入力しても何も起こりませんでした。
どうにかしてfixefoxでも動くようにできないものでしょうか。
よろしくお願いいたします。
※最初IE11で動かなかったのですが、UA判定の部分を少し書き換えたら直りました。 >>189
そういうのは作者に直接問い合わせるべきなのでは？
ここは修正代行サービスではありませんよ
軽くソースを見る限りではUA Detection的なコードがあるのでそれを何とかしないといけない感じですね
https://github.com/heeesa/autocomplete_romaji_hiragana/blob/master/autocomplete_romaji_hiragana.js#L6
e.which のコードが実装依存なので e.keyCode にすれば動くかもしれません
https://github.com/heeesa/autocomplete_romaji_hiragana/blob/master/autocomplete_romaji_hiragana.js#L24
この手のブラウザの実装差異はjQueryが内部的に吸収してくれるので標準APIだけを使っていればいいはずですが、作者はそれを知らないようです
コードがとても古臭い書き方なので一から作り直した方がいい印象ですね >>189
else if (currentBrowser == "firefox" || currentBrowser == "gecko"){
// ここが空
}
Firefoxには未対応だろ？
自分で空の部分を作るしかない >>189
それ使ったらだめレベルだな。
autocompleteという名前からして間違ってる。
俺のやる気が出たら書いてやるよ IMEで確定前の文字入力は何を入れても229が押されたことになるのか
この手のインターフェースはたまーにみるけどbackspaceとか押したときとか
まともに動いたためしがない。ちょっとやってみてその理由がわかったわｗ
どうやってひらがな取るのがいいんだろうな（もはや元のコードは参考にしてない） FirefoxはIMFでEventを拾わないから駄目だろ この手のやつって入力訂正とかしたら
めちゃくちゃになるんだよな
で閃いた。
漢字からひらがな（ローマ字）に変換するのはどうだろうか？
もちろん漢字の読み方は複数ある。それはタイプした文字から確率的に選択する。
例えば「東」からひらがなに変換する時「あずま」と「ひがし」があるが
漢字を入力するときに、タイプされた文字が、AZUMA に近いか HIGASHI に
近いかで判断する。誤入力があったとしても、どの文字が入力されたかで判断すれば
それなりの精度で正しくひらがなに変換できると思う
ちなみにこれを実現するには、サーバー側の対応と名前辞書が必要になるので簡単にはできないよｗ と思ったけど、名字だけで30万種類、多いっちゃ多いけど
圧縮すれば名前辞書サイズは200KBぐらいになるかもしれない。
サーバー側がなくても不可能ではないかもね。
いや、そもそも、漢字→読み方 のデータさえあればいいのだから
ウェブサーバーに単なるファイルを置くだけで十分か ごめん、名前の漢字（？）ごとに分けたファイルという意味
本当に漢字ごとだとファイル数多くなるからある程度工夫した方がいいと思うけど 形態素解析使えばいい。igoとかyahooAPIで十分だろう
変換前の取得はやめたほうがいい。あれは死ぬ
googleはすげー精度＋速度でサジェスト出してくれるけどあれは神業だわ >>202
形態素解析は知ってるけどあえて言わなかったんだよ。
名前辞書っていうのはそういうこと。
用途を限定することで実用レベルになるように考えてる httpsのサイトからhttpのサイトにjqueryでajaxしてデータ取得出来るの？
セキュリティのエラーで失敗する？ >>205
でも例えばhttpsのページに<img src=http:// ．．．
が有るとエラーするやん？
Ajaxならエラーせずにimgをget出来ちゃうの？ iframe（同じドメイン）の中身を取得したいんだけど
その中身がHTMLじゃなくてテキストの時
どうやって取得すればいいかわからない
ただのテキスト、bodyもなにもないときは
jqueryは無力なのか？ 無力っていうかDOM用ライブラリでテキストファイルを扱うってのがおかしいでしょ
jQueryでCSVファイルの解析もできないけど、jQueryは無力か？なんて言わないでしょｗ ウィンドウサイズで読み込む外部JavaScriptを変えたくて下記にしてみました。
jQuery(document).ready(function($) {
if (window.matchMedia( '(min-width: 480px)' ).matches) {$.ajax({url: 'javascript.js',dataType: 'script',cache: false});};
else {$.ajax({url: 'abcscript.js',dataType: 'script',cache: false});};});
これだとFirefoxでは反応してくれるんですが、
Chromeとedgeだと画面サイズ関係なく機能してくれません。
どのブラウザでも動く他の方法はありませんか？ 失礼しました。
Webサーバー上だと機能するようです。
ローカルだとFirefoxだけ反応してくれます。 中身見てないけどそのままはっつけたらelseでシンタックスエラー出たよ >>212
ajaxはhttp通信可能な環境が必要
ローカルテストするならHTTPサーバをたてる必要がある >>212
ところで、js読み込んだ後にリサイズした場合はどうすんの？
リサイズするたびに読み込むってのもアレだし設計見直した方がよさそうな気がするけど みなさんありがとうございます。
>>215
Firefoxはローカル環境でできるのが特別なんですね。
>>216
メインはスマホ対策です。
無駄にソースを読ませたくないのと、
間違っても今まで実行されなかったのがブラウザの違いや、
バージョンアップで動くようになってしまうということを防ぎたいからです。 > ところで、js読み込んだ後にリサイズした場合はどうすんの？
意外とウインドウのリサイズはしないｗ
> メインはスマホ対策です。
ただしスマホはよくリサイズするｗ
（縦横回転するのでね） jqueryとphpがなかなかマスターできない…
コピペで大体は行けるけどソース見たら絶対ダサいんだろうなw
中途半端に使えるもんだから勉強するにもやる気が…。 >>214
間違ってるからなｗ
なんでわざわざ見づらく書くんだろうか
// ちゃんと改行しただけ
jQuery(document).ready(function($) {
if (window.matchMedia( '(min-width: 480px)' ).matches) {
$.ajax({url: 'javascript.js',dataType: 'script',cache: false});
};
else {
$.ajax({url: 'abcscript.js',dataType: 'script',cache: false});
};
});
// まともに修正するとこうなる
jQuery(function($) {
var isMatched = window.matchMedia( '(min-width: 480px)' ).matches;
var url = isMatched ? 'javascript.js' : 'abcscript.js';
$.ajax({url: url, dataType: 'script', cache: false});
}); >>219
まぁ分かる
保守するようになれば何が悪いか分かる
function foo(){}
function foo2(){}
というソースを見ればもう少しちゃんとしようと思うよ
一度以前作ったサイトの手直しをしてみては？
多分数倍の速さで作れる >>221
実務でやってるのにこれだからなw
うん、ポートフォリオサイトも制作中だし振り返りつつ勉強し直すわ… ポートフォリオサイトっていちいち作るものなの？
現在稼働中なのをそのまま見せびらかすんじゃだめなの？ ポートフォリオなんざ、Dribbbleのリンク張るだけで十分だろ こんにちわ、初めまして。
2月からweb系の業務に初めて着きまして、
何から勉強していいのかさっぱりで困っております。
ソースを見るとjqueryが中心で書かれてるようで、
ここから勉強したほうがいいのかなと思っております。
何かよい参考サイトなどご存知でしたらご教授お願いいたします。 >>225
一番いいのは公式サイト
http://api.jquery.com/
https://en.wikipedia.org/wiki/JQuery#Release_history
jQueryの最新バージョンは2016年9月にいリリースされた3.1.1
ややこしい話だが、2016年5月にリリースされた1.12.4と2.2.4の機能は同じ。
サポートブラウザが違うだけ1.12はIE6-8もサポートされている。
リリース日を見ればわかるが、1.9までは一本道で
それから一旦分岐して3.0で合流している。
jQueryの互換性はかなり高いのだが、5年ちょっと前にリリースされた1.7で
推奨されるやり方が変わり1.9で古いやり方が切り捨てられた。
つまり1.7以前のコードは今のやり方とは全く違っていて、見る価値はない。
参考にしても良いのは1.9以上がギリギリ許容できる範囲
何が言いたいかというと「ヌー」とか書いているキモい絵があるクソサイトは
絶対に見てはいけないということだ。
こっちもjQuery 1.9で古いんだがまだマシ
http://js.studio-kingdom.com/jquery/ 1.7ではlive()等、かなり重要な関数が使えなくなったんだよな。あれは本当に困った
古いリファレンスやコード、プラグインでは未だに使ってることもあるので、
jQuery Migrate plugin
ってのを覚えておいたほうがいい。これを入れておくだけで昔のコードが使えるようになる。 あとアップグレードガイドも読んでおくといい
https://jquery.com/upgrade-guide/
https://jquery.com/upgrade-guide/1.9/
https://jquery.com/upgrade-guide/3.0/
日本語の翻訳も探せば見つかると思う。これとか
http://qiita.com/fmy/items/345a264a1cf2e2a73f62
参考サイトを探している段階なら、世の中にある古いやり方や間違ってるやり方に惑わされやすい。
例えば
$(document).ready(function() {・・・});
という書き方は非推奨になった。
これは俺が何年も前からずっと言ってきたことなんだが
$(function() {・・・}) という書き方が公式に推奨されるようになった
https://api.jquery.com/ready/
> As of jQuery 3.0, only the first syntax is recommended;
> the other syntaxes still work but are deprecated.
理由はこっちで詳しく説明してあるな。
https://www.webprofessional.jp/jquery-document-ready-plain-javascript/ >>228
Migrateっていうのは移行という意味。
jQuery Migrate pluginというのは昔のコードを動かすためではなくて、
昔のコードから新しいコードへMigrate（移行）させるためのもの
未だにjQuery Migrate pluginが必要とされるようなものは
捨てるべきだよ。 jQueryはよく使われている分、ネットで初心者共が
クソコードさらしてるので、ちゃんとした本で勉強するのが一番
俺のおすすめはこれ
コアjQuery＋プラグイン/jQuery UI開発実践技法 JQuery in Action 2nd Edition
https://www.amazon.co.jp/dp/4798124281
http://www.shoeisha.co.jp/book/detail/9784798124285
初心者には少し難しいかもしれないがjQueryの基礎を勉強しつつ
この本で正しいやり方になおしていくと良い
ちなみにこの本はタイトルからわかりづらいが、海外で有名な
in Actionシリーズの翻訳本でクオリティーが高いことは保証済み
http://d.hatena.ne.jp/ryoasai/20101029/1288362232
> Manningのin actionシリーズはMEAP（Manning Early Access Program）という
> 事前評価プロセスを通して、クオリティーを十分に高めてから出版されることもあり、
> 比較的あたりはずれが少なく良書が多いと思います。 山田祥寛(よしひろ)、翔泳社
10日でおぼえる jQuery 入門教室 第2版
この本が簡単 10日でおぼえられるわけがないものを
10日でやるとか言ってるものは信用できない。
そういうのは10日だけでやれることしかしない
という意味でしかない これか？ｗ
10日でおぼえるjQuery入門教室 第2版
https://www.amazon.co.jp/dp/B00FZIZOLC/
トップカスタマーレビュー
5つ星のうち 3.0ステマ
投稿者 oper 投稿日 2013/11/13
形式: 大型本
山田さんの書籍は比較的安定していて、この本も悪くはないのですが、星5つのレビューが全員WINGS(山田さんのプロジェクトらしい)の本に星5つつけまくっている点に失望しました。
内容で勝負すればいいのにね。
コメント 50人のお客様がこれが役に立ったと考えています. このレビューは参考になりましたか？ 皆様ほんとうにありがとうございます。
ここにたどり着くまで、
色々Webを漁ってたのですが、
どの情報を当てにしていいのか（特に新しい、古いなど）
途方に暮れておりました。
「ヌー」も検索トップのほうにあったので、、、
227さんありがとうございます。
これからも、お恥ずかしい質問をするかもしれませんが、
宜しくお願いいたします。
とりあえず、ゴリゴリ書いて覚えていきたいと思います。 実際に書き始めて一ヶ月も経てば新しい古い、宛になるかどうかはわかるようになる ２ちゃんねる初心者です。
学校の課題で今週の木曜までに自分のwebを作成して提出するというものが出ているのですが、見え隠れするサイドバーを入れようと思っています。
ちなみに課題の条件条件としてbxSliderを用いること、トップページのみの作成ということです。現在見え隠れするサイドバーを作ろうとしている所なのですが、やり方を調べ、html、cssやjavascriptのコード？のようなものは見つけました。
しかし、cssとjavascriptのコード？をどのようにして、どこに入れればいいのか全くわからない状況です。
何か分かる事がある方がいたら教えてください。 >>239
返信ありがとうございます。試しに丸ごとコピー＆ペーストをしてみたのですが、以下のような文が出てきました。
このファイルはANSIテキスト ファイルとして保存すると失われてしまうUnicode形式の文字を含んでいます。
Unicodeの情報を保存するには、[文字コード」から[Unicode]を選択してください。
と出てきますが、この後どのように対処すれば良いでしょうか。 >>232-234
山田祥寛(よしひろ)、翔泳社
10日でおぼえる jQuery 入門教室 第2版
10日でおぼえる PHP 入門教室、第4版、2012
彼の本を使うと、なぜ10日で出来るのか？
イラストもふんだんに使っていて、予算が大きい。
最初から売れることが分かっているから、本を作る予算が大きい
一方、オライリーなどの本は、著者の書き殴りで、図など無いから、理解できない。
外国の本は、図解したり編集する、能力が無いから
山田祥寛の講座は、4万円で定員100名とか。
他にも、Java, Ruby など様々な言語本も、書いている
短時間で分からせるのには、教える技術がある。
TACとかの専門学校・塾とかと同じ。
パッと本を開いた瞬間に分かる >>241
じゃあなんでレビューしている人が
サクラしかいないんですか？ 初心者用ピアノ入門をよんでも
プロにはなれません・・・ >>241
下手なステマはやめとけ
これ以上やると、オススメの書籍は？の質問に
「ステマおじさん山田祥寛以外の本なら何でも」という回答がデフォルトになるだろう
別にこれ自体はどっちでもいいんだけど余計な仕事増やさないでくれ >>241
内容より先に予算どうこうっていう時点で読んでないだろお前
って思っちゃう オライリーなどの翻訳本は、翻訳者の印税も掛かるし、難しい本が多いから、あまり売れない。
だから、図・イラストを描いたりする、予算が付かない。
イラストレーターの印税か、料金も掛かる
だから、本をちょっと見ただけで、その本の予算が大きいかどうかが、すぐにわかる。
つまり、売れる本かどうかが、すぐにわかる
基本的に、初心者向けの本しか売れない なぜこいつは無根拠に売れる/売れないを断言出来るんだ？ > 367 Name_Not_Found sage 2017/03/02(木) 16:05:49.27 ID:???
> jQuery経由で実行すると実行速度が数倍かかるのは避けられないのかな
http://echo.2ch.net/test/read.cgi/hp/1485265364/367
何事もトライアンドエラーだよ
疑問に思ったことはいくつもの比較コードを書いて検証してみればいい
自分で検証する気がないなら諦めるべきだけどね WEBプログラミング板のスクリプト改造スレから「web制作管理板のjQueryスレで聞いた方が良いかも」と誘導されて参りました。
荒らし報告ツールの改造についてどなたか御対応できないでしょうか。
詳細は下記となります。
http://tamae.2ch.net/test/read.cgi/php/1314546533/178
本当に「jQueryスレ」がここで正しいのか自身がなく、かつスクリプト改造依頼になりますので、
正しい対象スレッドなどがありましたら、そちらに誘導をお願いできましたらと思います。 >>252
これはめんどくさいな～
これを改造するなら拡張機能になるけどめんどくさすぎる
1からサイト作ることになるけど誰が管理するの？
多分自分で勉強して作ったほうが良いと思う
もしかするとエクセルvbaの方が楽に作れるかもしれない if($(window).width() < 541)){
$(".foo").scroll(baz);
}else {
$(.bar).scroll(baz);
}
function baz() { 以下の時、うまくまとめて書く方法はありますか？
無名関数に名前をつけたり、変数に入れずになんとかやろうとしていましたがこんがらがってきました
・スクロールさせた時に関数を実行
・画面サイズ（540pxがしきい値）でスクロールする対象のオブジェクトは変わる。モバイルは.foo、PCはwindow全体
・無名関数で実行したい
・変数や関数の名前を使いたくない
if($(window).width() < 541)){
$(".foo").scroll(baz);
}else {
$(window).scroll(baz);
}
function baz() {
/* 処理 */
} >>256
/*処理*/の内容に依存していて、コードも変わってくる気がする
変数など宣言はしたくないのはなぜか、はとりあえず置いといて
($(window).width()<541?$(".foo"):$(window)).scroll(function(){/*処理*/}) >>257-258
一般論として、jQueryオブジェクトを三項演算子の評価値として使わない方がいい。
再利用しづらくなるし、コードによっては遅くなったり無駄ができたりする。
同様の理由でjQueryオブジェクトを変数に入れたり関数の戻り値するのもおすすめしない
（あとスペースは適切に入れたほうが良い。）
今回の場合はこう書いたほうが良いよ。
$($(window).width() < 541 ? ".foo" : window).scroll(function() {/*処理*/ });
これはこれで見づらいので俺ならこうするけどな。
var target = $(window).width() < 541 ? ".foo" : window;
$(target).scroll(function() {/*処理*/ });
更に言うならば、画面の大きさによってデザインを変えるっていうのは
通常CSSのMedia Queryを使うのがいい。
おそらくその閾値541っていうのはデザインのためにCSSに書いてあるでしょ？
コードでも同じことを書いたら二重になってしまう。
ちょっと俺はやったことないんでもっといい方法があるかもしれないけど、
例えばMedia Queryを使って要素の表示非表示させて:visibleセレクタで判別するとかね >>256
でさ、今更気づいたんだけど、
画面表示されてからサイズ変えた時大丈夫？
まああんまりやることはないと思うけどさ、
何か違和感あると思ったら、そこなんだったんだな。
通常イベントハンドラっていうのは最初のページ表示時につけて
それ以降付け替えたりしない。付け替えたりしなくても動くようにするんで
画面サイズで切り替えたりしないんだよね こうじゃないの？
にしてもscrollの対象が変わることなんてあるんけ？
$([$(".foo")[0],window]).scroll(function(){
//ここで分岐
}); jQuery Mobile は、パソコン・スマホ共用 >>252
ご返答ありがとうございます
>>254
サイトぐらいは自分で作りますよ
そして色んな人に使って貰いたい
自分だけが報告するわけじゃなくみんなで報告しやすいようにと考えると
やっぱりこのようなWeb系のツールが最良ですので
>多分自分で勉強して作ったほうが良いと思う
良い悪いではなく出来る出来ないの問題でして
>>259
>その処理だけを、新しく作ったらどうか？
それができたらここには来てませんね >>264
なぜ、そんなに偉そうな態度をとれるのだろう？
サイトを自作するならJavaScriptも自分で作る気概を見せなよ
ここは制作依頼する場所ではなく、質問者が作るのを手助けする場だからね
丸投げはNG >>265
やはり最初からこのスレは趣旨として正しくなかったと言うことですね
では>>252にも明記しましたように
正しい対象スレッドなどがありましたら、そちらに伺いたいと思います。
どこか趣旨に合致するようなスレッドをご存じないでしょうか？
お手数をお掛けします。 >>264
ウダウダ言い訳せずに作ったほうが早い
プログラムなんて納期を考えなければいつか出来るもの
・入力。ajaxは使わない
・phpでfile_get_contentsでサーバーに保存
・エンコード
・htmlをパース
・配列に突っ込んでソート
・出力
これだけ。
セキュリティの知識不要だから楽勝
で、jqueryもajaxは使わないので移行はスレチ >>268
ありがとうございました
感謝いたします >>268
そこは初心者スレであって制作依頼スレではないのではなくて？
質問者に学ぶ意志が全くないのなら、ランサーズとかに金出して依頼すべき案件に読める ソースコードを見ると、2chのHTMLには、
<div class="number"> タグと、<dt> タグを含む、2種類あって、
処理を分けて書いている
このソースコードの作者は、HTMLのタグを取り出すのに、正規表現を使っているから、
ここをブラウザ内蔵または、jQueryのHTML Parser を使って、
(URL) (日付) (時刻) (ID)の書式4文字列のタグを、取り出せば良いかも
ただ、その例には、<div class="number"> タグしかないから、
<dt> タグを使っているHTMLには、対応できない
それと、同時に取得できるHTMLを、10件までに制限した方がいい。
あまり多いと、2chへの営業妨害とみなされて、訴えられそう
まあ、そのソースコードを修正するよりも、新しく作った方が良さそう
JavaScript, jQueryは、WEBプログラミング板やプログラム板よりも、
この板の方が、やっている人が多い ここにアクセスして、返ってくるHTMLは、
http://hanabi.2ch.net/test/read.cgi/wcomic/1438080242/102
<div class="post" data-date="NG" data-id="102" data-userid="" id="102">
<div class="date">2016/12/24(土) 14:59:51.98 </div>
</div>
(URL) (日付) (時刻) (ID)の書式4文字列のタグは、id="102" より取り出せる。
日付 : 2016/12/24
時刻 : 14:59:51.98
ID : data-userid=""
それらを連結すると、こうなる
http://hanabi.2ch.net/test/read.cgi/wcomic/1438080242/102 2016/12/24 14:59:51.98
今は、jQuery.ajax で、複数のHTMLを取得する方法を、調べている 出力HTMLの仕様差を埋めるなら、datファイルをxhrまたはfetchで取得すればいいんじゃないかね
最も、質問者本人は作る気が全く無さそうだが まったくの初心者です。
お時間のある方、よろしければご教授願えますでしょうか。
if($(this).hasClass("mail")){
if($(this).val() && !$(this).val().match(/.+@.+\..+/g)){
$(this).parent().prepend("<p class='error'>メールアドレスの形式が異なります</p>");
}
}
if条件の&&前の$(this).val()は何を意味しているのでしょうか？
メアドの形式判定なら&&以降だけで足りている気がしてしまいます。 >>274
$(this)だけでは分からない
大抵
$("foo").click(function(){
if($(this).hasClass("mail")){
if($(this).val() && !$(this).val().match(/.+@.+\..+/g)){
$(this).parent().prepend("<p class='error'>メールアドレスの形式が異なります</p>");
}
}
})
のように、何かのイベント元として$(this)が使われる
今回は<foo>が$(this)の対象になる >>275
説明不足で申し訳ありません。イベント部分はこうなっています
$("form").submit(function(){
$("input[type='text'].validate,textarea.validate").each(function(){
//メールアドレスのチェック
if($(this).hasClass("mail")){
if($(this).val() && !$(this).val().match(/.+@.+\..+/g)){
$(this).parent().prepend("<p class='error'>メールアドレスの形式が異なります</p>");
}
}
});
});
ここでの$(this)は
input[type='text'].validate もしくは
textarea.validate で合っていますか？ 回答者がアホ。無断なやり取りすんな。
単に未入力の時にエラーにしたくないだけだ >>277
if($(this).val())
で、$(this)に何らかの値が入っていると
条件を満たす ということでしょうか？ >>279
なるほど！trueが返ってきて条件成立、なのですね。
皆様ありがとうございました。とても助かりました。 複数のajax処理と、2chの返信から、DOMを構築して、
jQueryでデータを取り出す所を、今研究している
元のHTMLは、ajaxで2chへアクセスして、その返信をHTMLに表示するなど、なかなか凝っている。
こういうループ処理なら、AngularJSを使いたくなってくる
2chで、こういうツールを作れる人は、
プログラム板のVBScriptのスレ主である、ピラフだけかもw
1週間経っても、誰も作れない時は、ピラフに頼むしか無さそう 無名関数のfunction(){}ですが、この'function'を置き換えることってできますか？ >>286
いえ、短くする方法を知りたかったので、とてもありがたいです
そんな記述方法があったのですね >>281
はっはっは、そのピラフってやつは無能だった
結局ピラフは作れなかったぞｗｗｗ 作ろうと思えば作れる
・みんなが使うのが確定している
・共同開発
なら俺も手伝うわ
頑張って作って、数人が使うだけは辛い
しかも2chって結構特殊なフォーマット何だよ。鯖によって変わる >>252-290
プログラム技術板に、スレがある
２ｃｈの荒らし報告の書式対応のプログラム
http://echo.2ch.net/test/read.cgi/tech/1480669386/l50
ちなみに今、漏れは、途中まで作っているよ。
出来なければ、ピラフに頼むつもり
ttp://～/～/1-1000
今、入力URLの、1-1000 のrange、または、1など単独数字の、入力チェック部分を作っている
ただ、その例には、<div class="number"> タグしかないから、
<dt> タグを使っているHTMLには、対応できないよ WEB+DB vol.97 の特集が、React
WEB+DB vol.94 の特集が、Kotlin, Electron http://semooh.jp/jquery/api/core/jQuery/expression%2C+context/
jquery()の第二引数、contextってどういう風に使うものなんでしょうか
絞り込み？
$('body',$('html'))
これでbodyが返ってきますが
$('html body')
でいいような気がします >>292
すでにピラフに頼んだんだろ？無視されてるけどｗ
VBScriptについて必死に話し合うスレ [転載禁止](c)2ch.net
http://echo.2ch.net/test/read.cgi/tech/1416826139/809 >>294
var $html = $('html');
$('body',$html); //$html.find('body');
$('div',$html);
$('a',$html); >>294-296
jQuery(expression, context)で、context を指定すれば、
その子孫だけを探索するから、速い。
contextより上の階層を、探索しない
もし、contextより上の階層が更新されているなら、
最上位のbodyから探索すべきだけど
>>295
ttp://～/～/1-1000
入力URLの、1-1000 のrange、または、1など単独数字の、
最もややこしい、入力チェック部分の目途がついたから、
ピラフに頼むのは、もう少し後にする >>296,297
なるほど、絞り込む分処理が早くなるんですね
ありがとうございました カラーボックスと問い合わせフォームを一緒に使おうと思うのですが、jqueryの読み込みが重なるのかよくわかりませんが、
同一ページにタグがあると正常に動きません。
カラーボックス
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";></script>
問い合わせフォーム
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js";></script>
問い合わせフォームのタグを消せばカラーボックスが動くことは確認しましたが、
ここからどうしたら良いのかわかりません。
カラーボックスはこちらのもの
http://www.jacklmoore.com/colorbox/example2/
問い合わせフォームはこちらのものです
https://www.1-firststep.com/archives/462 このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。
jQueryを使って作る側のスレであって、こんなプラグインありませんか？と聞くスレではありません。
そういうのは自分で探してください。
ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。 jQueryでcssを指定する時、css自体を触るのではなく
予め設定しておいたclassを付け外しするほうが良いと思いますが、こういう方法の指針などはありますか？ >>302
なるほど、確かにそうですね
もうちょっと勉強してきます >>300
299ですが、私に対してでしょうか。
全く理解できていないので。 ここは「jQueryの使い方」の質問スレ
「jQueryで作られたもの」は知ったこっちゃない
分からないならサポートに聞くと良い
個人的には色々いじるんじゃなく、
・カラーボックスを使わない
・カラーボックスの部分はちゃんと勉強する
で、すぐに解決すると思う VBScriptについて必死に話し合うスレ
http://echo.2ch.net/test/read.cgi/tech/1416826139/832-
こらこら団のアプリは、プログラム板のこのスレで開発中。
ピラフも、どうやら興味を持ってくれたようだw
>>299
異なるバージョンの、2つのjQueryを、同一ページに読み込むのは、おかしい
新しい方(1.12.2)だけを読み込めば？
それでカラーボックスが動かないなら、
1.11.1 にして、問い合わせフォームが動くかどうか、テストすればいい
それで、問い合わせフォームが動かないなら、それらは同時に使えない。
異なるページになら、異なるバージョンの、2つのjQueryを使えるかも >>307
全く興味ないんで勝手に向こうでやっててくれ >>307
くすくすくす。あ、ここでやんなよ。向こうでやれ
http://echo.2ch.net/test/read.cgi/tech/1416826139/840
VBScriptについて必死に話し合うスレ [転載禁止]c2ch.net
840 : ピラフ ◆9Jro6YFwm650 2017/03/27(月) 20:10:57.30 ID:bt96dW+y
やろうと思ったけど何をやればいいのかわからなかった
ピラフあきらめた！ テキストボックスでユーザが入力できることに加え、
別の操作で値を自動入力することを考えています。
あるボタンを押すとテキストボックスに値が入る仕組みです。
<p id="hoge">
<label><input type="text" class="moge" value="10"></label>
</p>
$('#hoge').find('.moge').val(20);
で、
(1)初期は10
(2)js実行後にブラウザでの見た目20
(3)ツールでDOMを見るとvalue=10のまま
(4)$('#hoge').find('.moge').val() で取得した値は20
ブラウザはIE/Fox共同様でした。
(3)も20にする（反映させる）にはどうしたらいいでしょうか？ 失礼、勘違いでした。
ここは変わらないものなのですね（たぶん） おー、それは知らなかった、というか気にしたことなかった
それは変わらないものだね。愛だね。
$(foo).attrなどで変えることも出来るけど、特に意味は無いかな >>310
フォームの値については、HTMLに書いてあるものは初期値と考えればいい。
フォームの値をいくら変えたとしても、HTML自体は変わらない。
HTMLを書き換えたいのであれば、HTMLを書き換える命令を使う（attr()とか） <div>
<div id="div1">
<div id="div2"></div>
</div>
</div>
<div>
<p></p>
</div>
たとえばこんな場合に、div1から後方に探索して、最初に現れる<p>を求めたいのですが、どうすれば良いでしょか？
もしdiv1やdiv2にも<p>が有る場合にはそちらを検出したいのです。 >>314
has、子孫セレクタ、グループ化を組合せて3つのパターンを列挙してやればインデックス0がそれ >>312
>>313
<p id="hoge" zoku="abc">テキスト</p>
$('#hoge').text('てきすと');
$('#hoge').attr('zoku', 'def');
で、ツールで見ると「てきすと」と「def」に即変わるのでてっきりvalueも変わるもんかと
というかあまり考えてませんでした。デバグ中にたまたま気がつきまして、あれ？っと。
それが変わらないのが違和感あるなと思いつつ、ユーザ入力の部分が変わるのもそれはそれで違和感ありますが。
お騒がせしました。 >>314
$('p').first();
ただし他のpも検索されるので、>>314の全てを<div id="div0">で囲って
$('div0').find('p').first();
ただしdiv1の外も検索されるので、>>315
pにクラス付けた方が楽かも >>316
タグに書いてあるのは属性なんだよ。
属性っていうのはattrでしか変えられない。
属性と値は違うものなんだよ。 >>318
>タグに書いてあるのは属性
その言い方だとvalue=""も属性となるな >>319
その通り。HTMLのinputタグのvalue=""は属性
そのHTMLをパースして表示されたインプット要素の値は属性ではない。
ブラウザでキーボードを叩いてインプット要素の文字を変更したとしても、
属性には反映されない >>316
順序がおかしい。デバグ中にたまたま・・・ってところは気にした方がいいよ。
Firebugか、ChromeのコンソールでDOM見ながらスクリプト書いてる？
jQuery読んでるページでそのまま記述して実行すればリアルタイムで確認しながら見れる。
コンソールに書き出すのも最初はいいけど、breakpoint決めて、要素を選んでHTMLの状態を確認できるようにするといいよ。 classもIDも属性なんだよな
この辺うまく認識してないと思わぬところでミスが起きる 【attribute】
西洋美術において伝説上・歴史上の人物または神話上の神と関連付けられた持ち物。その物の持ち主を特定する役割を果たす。 >>321
今回の件は見なくても問題なくスラスラ書けてますし、把握してるので特に必要にならない限り見ませんね。
別件で引っかかって確認してたらその辺に行き着きつきまして。
>jQuery読んでる～
やってます。
attrやdataはけっこう使い込んでるのでvalueの件は勘違いでした。 上から目線で基本的なこと説明してるのがいるが最初の人のほうが詳しいキガス >>318
>属性っていうのはattrでしか変えられない。
これが自分で書いてる他の部分と矛盾している
属性とはHTMLでいうものとattrそのものの2種類ある
この辺うまく認識してないと思わぬところでミスが起きる >>292
ありがとうございます！
すいません、近頃ビットコインの値動きが激しくてここを全く見てませんでした
ここまで心臓部が出来てたんですね
http://echo.2ch.net/test/read.cgi/tech/1416826139/851
助かります
以降はリンク先をウォッチさせていただきます >>314-317
これは、ちょっとしたパズルだな
>もしdiv1やdiv2にも<p>が有る場合には、そちらを検出したい
確か、jQueryの探索順序は、深さ優先探索だったかな？
まず最上位から、すべてのタグを探索すると、タグの配列が、深さ優先で、
0,1,2 ～ 999,1000 と並ぶ
この配列の先頭から、<div id="div1"> を探す。
その次から、<p>を探す ローカルPCにHTMLと、以下のJSファイルを置いて、
Win10, Edge からJSONP で、2chにアクセスして、HTMLを取得しようとしているけど、
callback関数が呼ばれないというエラーになる
HTMLは文字化けしているけど、取得できている。
2chはSJISなので
ローカルに、サーバーを立てていないからなのかな？
var url = "http://hayabusa6.2ch.net/test/read.cgi/linux/1479499953/6";
// 全体の設定
$.ajaxSetup({
type: "GET",
dataType: "jsonp",
timeout: 60 * 1000
});
$.ajax(url).done(function(data, status, xhr) {
console.log( "成功" );
}).fail(function(xhr, status, error) {
console.log( "失敗", '\n', xhr.status, '\n', status, '\n', error );
// }).always(function(arg1, status, arg2) {
}); 332の続き
HTMLは文字化けしているけど、取得できている。
2chはSJISなので。
xhr.status は200
だから別に、callback関数は必要ない。
fail じゃなくて、done になってくれれば、data が取得できるのだが ブラウザからのクロスドメインは難しいから、
YQL (Yahoo! Query Language)のサービスを使って、クロスドメインを可能にする、
jquery.xdomainajax.js プラグインを、試してみようと思う
こらこら団報告書生成
http://hotmilk350ml.web.fc2.com/korakorashot.html
元々、このツールでも、このプラグインを使っているし
でも、世界中の人が、YQLを使ったら、どうなるんだろう。
2chでもYQLを、アクセス禁止にするかも知れない >>331
を修正
>>314-317
すべてのタグを探索しなくても良い
最上位から、すべての<p> or <div>(または<div id="div1">)を探索して、
<div id="div1">を探す。
そして、その次の<p>を探す >>335
>>315で答えがでているものを小難しく考えて持論を長々と書くのは止めてくれ >>332
別件で今更jQueryのajaxについて調べる必要が出たから、
あとでちゃんと調べることになるけど、今はめんどくさいので
うろ覚えで答える。
あんた、jsonとjsonpを勘違いしてるだろう？
jsonはJSON形式の文字列を返すものであるが、
jsonpはJSONを引数にして関数を呼び出す "コード" を返さないといけない。
デフォルトの関数名はcallback。
つまり以下のようなコードを返す必要がある。
callback( {"num":[1,2,3], "abc":["a","b","c"]} );
そうすると、あんたがソースコードに定義してるはずの
callback関数が呼び出される。
>>333
> だから別に、callback関数は必要ない。
jsonpを使用している以上、あんたはcallback関数を定義しなければいけないし、
サーバー側からはcallback関数を呼び出すコードを返さないといけない。
jsonpを使用している限りcallback関数は絶対に必要 $.ajaxSetup({
type: "GET",
dataType: "jsonp",
// jsonpCallback: "callbackName",
timeout: 60 * 1000
});
dataType: "jsonp" を指定すると、jQuery が自動的に、jQuery1900～のような、
ランダムで重複しないcallback関数名を作るから、
jsonpCallback: "callbackName" で、自分で指定しなくてよい
ただ、ブラウザという環境がダメなのかな、と思っている。
サーバーを立てていないから、サーバーからcallbackしてもらえないのかなと
だから、YQLのように、サーバー(プロキシ)を通すと、
そこから、callbackしてもらえるのかなと
本来は、wget, curl みたいに、2chからHTMLを取得できれば良いだけ。
HTMLさえあれば、そこからjQueryでタグを抜き出せる
ただ、ブラウザ環境で、JavaScriptでは、クロスドメインで苦労する >>339
名前欄の331は、271の間違い
まあ、同一人物だけどなw >>339
>>338の内容を少しだけ修正する
あんた、jsonとjsonpを勘違いしてるだろう？
jsonはJSON形式の文字列を返すものであるが、
jsonpはJSONを引数にして関数を呼び出す "コード" を返さないといけない。
デフォルトの関数名はcallback。
つまり以下のようなコードを返す必要がある。
callback( {"num":[1,2,3], "abc":["a","b","c"]} );
そうすると、jQueryが用意してくれているcallback関数が呼び出される。
>>333
> だから別に、callback関数は必要ない。
jsonpを使用している以上、内部でcallback関数が使われるので
サーバー側からはcallback関数を呼び出すコードを返さないといけない。
jsonpを使用している限りcallback関数は絶対に必要 通りすがりですが
jsonpからcallback()の部分を消せばjsonになると思っていいですか? サーバー側からJSONPを返してないのに
JSONPが使えるわけ無いだろう
馬鹿か ブラウザ環境では、JSでクロスドメインできない。
でも、HTML内で、
<script type="text/javascript" src="http://なんとか/aaa.js"></script>
のように、<script>タグを使えば、クロスドメインできる
だから、それを応用して、HTML内に動的に、<script>タグを作って、
アクセスする技術が、jsonp JSONPみたいなダサいハックをいったい何年放置する気なんだWeb系の連中は >>345
> ブラウザ環境では、JSでクロスドメインできない。
できる
>>347
> JSONPみたいなダサいハックをいったい何年放置する気なんだWeb系の連中は
7年ぐらい前に解決済み
年取ると、時間の流れが早いよねｗ >>348
どの辺が？
もっと簡単な方法があるならコードを書いてみて 読んだ上で>>315が一番簡単だと思った俺は異端なんかな？
長文書いてる奴は1行でかける事を何を難しく考えてるんだ、と思ってた まぁでもコードでバシっと書けないところがカッコ悪いんだよ
「おれ絵めっちゃ上手いぜ」 「へぇじゃあ描いてみて」 「こうやってああやって描けばいいんだよ」
「ん？描いてみて」
「・・・」
なんだわ 論点がずれてるよ
「小難しい」と指摘された回答が「小難しくない」から反論されてるんでしょ
「小難しい」といった人が小難しい理由を書くべきだよ
小難しくないコードを出せ、というのも筋は通ってる 難しいのがコードの問題なのか、人間の問題なのかを
見極める必要がある。
人間の問題、つまり（俺にとって）難しいとか言い始めたら
そんなのは無視した方がいい。
漢字読めない俺は難しいからひらがなで書けと
言ってるのと同じだから
高い技術を持った人が、そのコードは簡単というのであれば
それは人ではなくコードが簡単だと言えるだろう。
簡単なコードを読めるには技術が必要ってだけだ 無駄に長い長文だな
もうお互いにコードを出して第三者に評価してもらえばいいんじゃないの？ >>357
あとでごちゃごちゃならないように、
良いコードの条件を言っておくわ
1. 「（俺が・初心者が）読めない」は理由にならない
2. 単語の長さは関係ない
3. 条件文が少ない。
4. ループが少ない。
5. 行数が少ない（ただし; で無理やりつなげたり、横100文字を超えるのはダメ）
6. 重複する単語やコードが少ない jQuery('#div1 p,#div1+p,:has( #div1) p,:has( #div1)+p,:has( #div1)+p')[0];
https://jsfiddle.net/eyg016m2/
あなたが小難しくないと思うコードを是非教えてくれ 一つ追加
なるべく少ない単語を使用する（複合語にしないということ） 重複したセレクタを削除した
jQuery('#div1 p,#div1+p,:has( #div1) p,:has( #div1)+p')[0];
https://jsfiddle.net/eyg016m2/1/ >>359
お前が書いたコード
'use strict';
var p = jQuery('#div1 p,#div1+p,:has( #div1) p,:has( #div1)+p,:has( #div1)+p');
p.each((i,p) => console.log(p));
修正後
var s = '#div1 p, #div1+p, :has(#div1) p, :has(#div1)+p';
$(s).each((i,p) => console.log(p)); >>363
後で扱いやすいように変数化しただけだから好きに改変してくれ
jQuery or $ もポリシーでどうとでも変わる程度の違い
それはともかく、>>315が小難しいといった人が書いたコードを早く見てみたいのだが $を使わずjQueryを使う人は、JavaScriptに慣れてない人だと思う。
ローカルスコープがよく分かってないんじゃないかな。
以下のように書けば、$はかならずjQueryになることが保証されるので
いちいち長い単語を使う必要がなくなる。
jQuery(function($) {
・・・
}
(function($) {
・・・
}(jQuery)); 本題とは関係ないところに反応して何がしたいんだ？
$('#div1 p,#div1+p,:has( #div1) p,:has( #div1)+p').each((i,p) => console.log(p));
for (let p of $('#div1 p,#div1+p,:has( #div1) p,:has( #div1)+p')) { console.log(p); }
こんなものは好みや流儀の違いであって「>>315が小難しい理由」にはなってない >>365
悪いが、両方とも知っている
jQuery を使用するのは検索性/可読性の観点からであって「$ をローカルスコープに閉じ込める方法を知らないから」ではない
>>358が指摘するように「単語の長さは関係ない」 単語の長さは関係ない。
だからこそ長いほうが可読性が高いわけじゃない。 "$" でgrep検索すると正規表現にもマッチしてしまうが、"jQuery" でgrep検索すれば jQuery だけが期待通りにマッチする
可読性は人それぞれ違うものなのでそこを議論するつもりはない
各々が読みやすい方を選択すれば良いわけで、言い換えれば、「あなたが好きな方を他人に強制する事」は出来ない
本題から逸れすぎているのでいい加減、話題を「>>314を実装する場合の小難しくないコード」に戻してくれ
>>315が小難しいというなら>>315の論理に沿ったコードも小難しいという事だ
あなたがたが書いたコードを俺のコードを元に作っているのだから、それも小難しいコードという事になる
では、小難しくないコードとは何なのだ？
俺はコードを出したのだから、そちらもコードを出してほしいのだがな > "$" でgrep検索すると正規表現にもマッチしてしまうが、
エスケープすればいいだけじゃね？ > 可読性は人それぞれ違うものなので
それは間違い。
人それぞれ違うものを"可読性"と言ってはいけない >>372
君は問題の本質を理解していない
/hoge$/ という文字列にも $("p") という文字列にも "$" で検索してHITしてしまうのが問題
/hoge$/ にはマッチさせたくない場合にはどうやって正規表現を書くかね？ 関係ないかもしれんが別の意味の$がマッチしてうざいときは$(とか$.で検索してるは >>375
では、jQuery.each や jQuery(function ($) {}) にはどうやってまっちするかね？
コード内の全ての jQuery を参照する $ を検索することが出来るかね？ それは、jQueryで検索すればよかろう？
> コード内の全ての jQuery を参照する $ を検索することが出来るかね？
できるんじゃねーの？
お前が出来ないって思って出したはずのものを
今ことごとく論破したでしょｗ ちなみに、jQuery.eachとは書かない。
$.eachと書く。その検索方法は>>376が言ってる通り >>373
可読性は主観だ
あえていうならば、「jQuery の方が jQuery である事を明示的に表しているから」だがね
それは主観的な問題で $ と jQuery の可読性が高いなんて誰にも断定できないだろう？
先程から枝葉にしか反論が来ないようだな
反論がなければ、「315が小難しい理由はない」と判断する > それは主観的な問題で $ と jQuery の可読性が高いなんて誰にも断定できないだろう？
「単語の長さは関係ない」の通り、可読性と単語の長さは関係無い
可読性の話じゃないんだから、どちらが高いか断定できないのは当たり前だろ jQueryよりも$を俺がすすめるのは、
タイプするのが楽だからだ。
もう一回言うぞ？
タイプするのが楽だからだ。
書く時の話であって、読みやすい（可 "読" 性）とは言っていない。
可読性に関係ない ＝ 可読性に違いがないのであれば
タイプするほうが楽な方が良いだろ？ それなら、「単語の長さは関係ない」から「単語の長さは短い方がいい」に訂正しろよ
変数名も1文字だけ使えよ 1文字の変数名ってすげー読みにくい
可読性は主観ではないらしいから他の皆も読みにくいんだろうな
読みにくい書き方をする理由がタイプ数が少ないだけなら俺にはメリットがないな 本題(>>314)を無視してどうでもいい枝葉にしか反論がないのは何故なんだ？
アホらしくなってきた > 「単語の長さは短い方がいい」に訂正しろよ
訂正しない。短い方がいいとは限らないからだ。
短いか長いかは関係なく、それがそのコードを書く人（修正する人）にとって
よく知られている単語（新参者にとっては知るべき単語）かどうかだ。
$はjQueryのコードを書く人にとってよく使われている単語で
$を知らずして、jQueryのサンプルコードを読むことは出来ない。
だから明らかに、jQueryのコードを書く人は$の意味を知っている。
だから、前提をつけて「よく知られている単語の場合は短い方がいい」となるが
それはあくまでタイプするのが楽であるという意味であって、可読性の話ではない 単語の長さは関係ないと言ってるのに、
長い方がいい、短いほうが良いと、決めつけたがるんだよなｗ
ほんとバカやで 略よりも長いほうが明示的だと思ったんだろう？
正確に言うならば、$は略ではなく短い別名だが。
可読性で重要なのは意味がわかるかどうかであって
言い換えると誰でもその単語の意味を知っているか？
という話なんだよ。 略称がいいか正式名称がいいかの違いに標準を求めるのが間違ってる 標準を求めるってなんのことだ？
（単語の長さに関係なく）よく知られている単語か、
そうでないかの話しかしてないぞ >>392
知ったうえでどちらを使うかは自由だろ
お前が主張する「単語の意味を知っているか」は知っているなら$を使うはずだ、といいたいんじゃないのか？ >>393
どちらでもいいのであれば、
タイプが短いほうが楽だろう？ >>394
それがお前の中で「標準を決めている」といってるんだよ
タイプ数が重要じゃない人の事も考えろ >>395
タイプ数しか違いがない問題なのに、
何をお前は基準にしてるのだ？ 検索性は変わらないことを実例を持って示した。
jQueryのコードをメンテナンスする人で$を知らない人はありえない。 「優先順位の違い」とか「単語の好みの違い」とか、いろいろあると思うけどな
JSと略する事を嫌ってJavaScriptと正式名称を書きたがる人もいれば、短く書くことをの好む人もいる >>398
例えば、var a = $; なんてコードに先の事例はマッチしないよな
揚げ足取りじゃなくて俺は「全てのパターンで $ を検索可能か」で考える
jQuery なら少なくとも$よりも正確に検索できる
「分かりやすさ」は知っているか知らないかの問題じゃない
整数型の変数を定義する場合に i と integer のどちらを採用するか、レベルのもの
それから、俺にとってはタイプ数は「どうでもいい」 >>400
それは揚げ足取りだなｗ
自分でそう思ってるから、否定するんだろ
$で検索すれば全部見つけることが可能。
余計なものが多すぎるなら、grep -v ででも消せばいい
はい論破ｗ >>400
> 整数型の変数を定義する場合に i と integer のどちらを採用するか、レベルのもの
え？ お前、みんながiを使うような緒齧ﾊで、
integerって名前の変数を定義するんの？ｗ
iはイテレータとしてよく知られているか単語だから
みんなiを使うんだよ？ >>401-402
検索性は高い方が好ましい
jQueryが$よりも検索性が高い事は誰にも否定できない
お前とは評価基準が違うだけなんだが、唯我独尊な奴だな > jQueryが$よりも検索性が高い事は誰にも否定できない
さっきからずっと否定しているが？
っていうか、そこまで検索に頼るっておかしくね？
どこに何がわからないから検索してるんだろ？
設計レベルでおかしいってことだよ。
jQueryはDOM操作をしている所と言い換えることができるが、
俺は「DOM操作をしている所」という条件で検索することは殆ど無い。
検索するとしたら特定の変数名やクラス名で検索する。 いや、こう書いても意味がわからんか？
変数名iはイテレータの略としてあちこちで使われるが、
変数名iで検索することはないだろう？
変数名iを検索の目的として選ぶことはないから。
それと一緒だよ。
jQueryという単語を検索したいなんてことはまずない この人は思い込みが強すぎて他人の意見を正しく理解できないんだな
無駄に改行を入れて冗長な文章になってるのもマイナス JSスレで散々見た流れだな
1. 回答をけなす
2. コード付で反論される
3. 初めにけなした内容では論破できないので、「取っつきやすそうな理由」を見つけてけなす
けなす内容は何でもいい
本題から大幅にずれても関係ない
とにかく、相手を論破出来れば何でもいい >>314
var answerFlag = false;
// #div1 または、p
$("#div1, p").each( function(index, elem) {
if ( true === answerFlag ) { // #div1 の次の要素
console.log( index + " : " + $(elem).text() );
return false; // each から抜ける
}
if ( "div1" === elem.id ) {
answerFlag = true;
console.log( index + " : " + $(elem).text() );
}
}); >>402
ループ変数iって読みにくくない？
そこもキッチリ名前を付けたほうが読みやすいよ ループ変数名よりブロックの長さやネストの深さの方が問題
そこがちゃんとしてればijkでなんの問題もない iは分かるけどｊは絶対止めたほうがいい。普通に読み間違える
使うのはいつもikmだわ 結局、出たコードは>>409だけで「315が小難しい理由」は分からず仕舞いか
時間の無駄だったな 蓋を開けてみれば、315のコードが圧倒的にシンプルで文句のつけようがなかった >>414
だいたいいつも男なんて 甘ったれで情けなくて 315のコードに少し手を加えた程度のコードだからだろうよ それもあるけど、>>315の文章を否定する具体的な意見が一つも出てないからだと思うな あえて否定するなら、>>315のいう「3つのパターン」が「4つのパターン(>>362)」だったぐらいか。
とはいえ、それもケアレスミスレベルで「小難しい」と断定するには程遠い。 >>314の要望ならこれでいいじゃねえの？
$('div').each(function(index, el) {
var $p = $(this).children('p');
if (!$p.length) { return; }
console.log($p.eq(0)[0]);
}); >>423
#div1 はどこへ行った？
それから、>>314ではdiv要素しか使ってないが、条件は「#div1の後方」であってp要素の親がdiv要素とは限らないんだが
いずれにしても、>>362よりシンプルに書くのは不可能な気がする :has(何か) p って body 内の p 全部にヒットしない？ >>425
「何か」の制約を受けるのでそんな事はない。
疑問に思ったことは自分で確かめろ。 >>424
console.log($(this).closest('div')[0], $p.eq(0)[0]);
これでどのdivの中のpなのかが参照できるだろ？ >>427
君は要件を勘違いしている
>>314の「div1から後方に探索して、最初に現れる<p>」を読め
「div」じゃなくて「div1」と書いてあるのは分かるか？
君のコードは無関係な要素にマッチする
https://jsfiddle.net/4majn0vf/ あるIDから深さ優先で、後方に探索して、最初に現れる<p>を取得せよ
このクイズを採用時のテストにすれば、ほとんど正解者はいないような気がする >>314 は TreeWalker とやらを使えば簡単そうだが
（jQuery その手のやつはないのかな） >>429
$("p")を取得
.each()でそれぞれのparentsの数を数える。最も深い深度を取得
forで最後から回して最も深度のの中から最初に現れたものを取得
スマートさの欠片もないけど、楽勝だぞ >>431
>>428の target3, target4, target5 にはどうマッチさせる？ >>430
可能だが、4パターンのコードを書く必要があるので、君が簡単と感じるかどうかは分からんぞ >>362は無関係な要素にマッチする事が発覚したので修正
https://jsfiddle.net/eyg016m2/4/
しかし、今の今までこの事実に気が付いて指摘した人が一人もいないとは… >>434はコメントがおかしかったので修正( <p>not target1</p> -> <p>target1</p>)
https://jsfiddle.net/eyg016m2/5/
ちなみに、>>409は要件を満たしている
https://jsfiddle.net/ayktj45t/1/
他で要件を満たしているコードはない >>430
TreeWalkerはjQuery APIに存在しないと思うが、フィルタ的な意味ではjQuery#filterが近いといえなくもない
TreeWalkerを使う場合、Element#matchesを使えば多少は楽になるが、肝心の :has() の実装が壊滅的なので親要素の探索が手間になる
http://caniuse.com/#feat=matchesselector
http://caniuse.com/#feat=css-has
jQuery#is を併用すれば楽が出来るが、>>435でやっている事をTreeWalkerに置き換えただけのコードとなる
https://jsfiddle.net/8yLzfzud/ 変なコードを書かなければいけないような構造にしなければいい お疲れ、>>409はjQueryでfindIndexを使えれば割と簡単に書けるよな
https://jsfiddle.net/ayktj45t/2/ >>431の実装を試みたが、とんでもなく複雑で諦めた
皆、すごいな >>437
こんな仕様が普通に出てきたら泣くｗ
これはクイズみたいなもんだと思うぞ 技術力の差が雲泥だな
いい加減な文句いってた奴が一掃されてる >>432
なんでそんなこと効くの？要件にないでしょ？ >>314
の流れ読んでないけど
＞div1から後方に探索して、最初に現れる<p>を求めたい
後方に検索ってp#p4のことじゃないの？
>>314だと見つからないと思うんだけど
<p id=p3></p>
<div>
<p id=p4></p>
<div id="div1">
<div id="div2"></div>
</div>
</div>
<div>
<p></p>
</div> <div id="div0">
<div>
<div id="div1">
<div id="div2"></div>
</div>
</div>
<div>
<p></p>
</div>
</div>
にできんのか？超簡単だぞ
>>437
こんなんなる前に普通は手を打つよな 俺の感覚だと上の方に検索するとしか思えないんだけど・・・
まぁ回答者が質問者を忖度してるなら、何も言わないけどね >>444
>>314のいう「後方」とはテキストエディタで "<p" を検索した際に #div1 よりも後方検索されるp要素全て
グループ分けするならこう
- #div1 の子孫要素
- #div1 の弟要素
- #div1 の親/祖先要素の弟要素
- #div1 の親/祖先要素の弟要素の子孫要素
>>435はセレクタを利用する事で対応したので簡単なコードに見えるが、内部動作的にはかなり複雑 >>447
>>314の一つだけある <p></p> の位置を見ればわかると思うんだが…
「親の弟の子要素」も後方に含む >>314の<p></p>は対応しなければならないとして、「div1やdiv2にも<p>が有る場合にはそちらを検出」とあるので最低でも3つのパターンに対応しなければならない
彼(314)の中ではDOMツリーの頭になってなくて、テキストエディタで後方検索しているイメージなんだと思う
■ケース1
<div>
<div id="div1">
<p></p>
<div id="div2"></div>
</div>
</div>
■ケース2
<div>
<div id="div1">
<div id="div2"><p></p></div>
</div>
</div>
■ケース3
<div>
<div id="div1">
<div id="div2"></div>
</div>
</div>
<div>
<p></p>
</div> >>451
あなたが>>314なら今までのレス全てに目を通して結果報告なりお礼なりしなさい
これだけ騒がせておいて「そういう意味です。」で終わらせるつもりなら厚顔無恥というほかない >>447
俺（うち）の感覚だと後方と言えば普通下だが
質問者が出てこない限り
と思ってたら
>>452
全くだな
まさか今まで静観してたわけではないよな
だとするととんでもないぞ >>450に異論はないが
>>451
質問者ならはっきりしてくれ
(1)「後方」とは上から下なのか、下から上なのか
(2)「最初に」とは一番上なのか、下なのか
(3)「div1やdiv2にも<p>が有る場合にはそちらを検出」とはdiv1を先に検出で間違いないか
(4)>>445のようにHTMLの構造を変えることができるか
(5)idのついてないdivにidをつけることは可能か htnlの構造変えて楽勝なら一旦jsで変えればいいんじゃないか >>454
>>450が真なら>>448も真だよ
「>>448が適合するp要素群の中で一番初めにマッチするp要素を返す」仕様が正しい
>>435-436,438に要件を満たすコードがあるので参考にしてみては？ >>409
は、jQueryがマッチした要素を、深さ優先順で並べることを、使ったやり方 >>435-436もそういう意味では同じだな(436はTreeWalker依存だが)
将来的にSelectors Level 4が実装されれば、もっと簡単に書ける
document.querySelector('#target-1:matches( p,~p),:has( #target-1)~:matches(p,* p)');
jQueryにも早く取り込んでほしいものだが、未だに:has()がjQuery Extensionsに分類されているところを見るにブラウザが実装し始めてから後追い実装しそうだな ネイティブ実装的には>>435のアルゴリズムを流用して、document.evaluateを使用するのがお手軽だな どんどん楽になっているようで
どんどん新しい技術が増え続ける
どうにもならんのかね 言語が新しくなっていくのはJavaScriptに限った話ではないがな
新仕様についていけないなら古い仕様でいつまでも書いていてもいいけどね(JavaScriptは後方互換性には手厚いから) まさか20年も置い続けることに鳴るとは思わなかったゾ・・・ :matches()は皆が待ち望んだ疑似クラスだと思うのだが、どうして増える事が不満なんだろう
「年齢的にもう新しい事を覚えるのはきついからこれ以上増えないでくれ」的な愚痴？
探求心がなくなった時点で、技術者としては一線を退いた方がいい時期だと思うが フロントエンドは新しいのがバンバン入ってくるわりには
粗製乱造というかなんといかこりゃスマートだわ参りましたってプロダクトが無いよね JavaScriptはかなり特殊な立ち位置にいるから、お前(464)の感覚がずれてるだけじゃないの 「スマートだわ参りました」がお前は誰と戦ってるんだ状態だが、イテレータは「上手い妥協点を見つけたもんだな」と感心したわ 新しい仕様が増える事に不満を覚える理由が「粗製乱造」なら「ぐだぐだ言ってないで、覚えろ」とどやしつける
お前が仕様をどう感じようが、覚えない理由にはならん ＞お前(464)の感覚がずれてる
この書き方をする君の方がよぽどずれてると思う >>463
そういうのは大体フレームワーク化されている
で、下手したら名前がバッティングして大変なことに >>456
>>450が真なら>>448も真だよ
どうでもいい
レス相手間違えてないか？ >>455
他に影響出たらどうすんだよｗ
大迷惑極まりないな
後々面倒だし
上で書かれてるが条件によってはfirst()かlast()で十分な可能性もある、が
なんにしろ質問者はもう来そうにないからこれ以上はムダだな 要件を確認している人に答えて「どうでもいい」といわれてもな
>>450で理解できないからそんな質問(>>454)をしているのだろうに >>472
>>450は十分想定内であって質問者への確認とは話が別
理解もなにも最初から>>450のつもりだったが読み違いでは？
別人のレスと混同してるとか 質問者本人じゃなきゃ答えじゃないからどうでもいいわな 探索で、前方/後方は、forward/back で、back は遡る意味だから、紛らわしい
正しくは、
順方向/逆順(遡る)か、
先頭から末尾へ/末尾から先頭へ >>473
要件が分かってないから質問しているわけだよな
>450で十分理解できるのにわけ分からん補足要求してるから横から教えてくれただけだろ
もっといえば、>314から>450の理解に至ることは十分可能だったが、先日からおかしな方向に解読して回答に文句をつける奴が多すぎる
当人の読解力不足を「質問書本人じゃなきゃ答えじゃない」と言い訳されても困る jqueryって死ぬ気で一ヶ月やれば簡単なものは閉開メニュー作れるようになると思うけどそれ以上のものを作るとなると死ぬ気で４ヵ月やっても怪しいと思う
参考書完璧に覚えただけじゃまだ作れないものあると思うけどどうすればいいの？ >>476
まだ言ってるのか
>>314の時点で>>450はすでに想定と言っておろうに何が不満なのだ？
質問者がはたして>>450で間違いないか確認することは誤ったことではなかろう
>>451でさえ本人か危ういし質問者本人かの問いに答えてないしなりすましも考えられるし
そんな食いつくほどのことかね 依頼者はコードに詳しいわけではなくむしろな無知な場合が多い。
うちらが普通に使ってる言葉がそのまま通用するとは限らない。
思わぬ行き違いや思い込みを防ぐために要件を念入りに確認することは大切。
自分がそう思ってても質問者が必ずしもその意図で書いてるのかは質問者本人でないとわからない。
もっともIPもなくこの流れになっては本人ですと書かれても信憑性に欠けるが。 面倒だから探索範囲をdivでくくれや
HTMLが担当別なら頼み込め
コード書くのも親切だがあんな状況になってることからしておそらくわからんだろ >>478-479
気持ちは分かるし、確認行為が重要な事は認めるが、ぶっちゃけ頭が固すぎなんだよ
>314から>450の3つのケースが導き出せるなら多少の語彙の拙さは柔軟に考えれば結論が出る事だろ
確認という意味なら>>454の「上」「下」がテキストエディタで見たときの「上」なのかDOMツリーで見た時の親要素の意味での「上」なのか分からん
まあ、質問者に分かる意味でいうならテキストエディタの意味での「上」だろうが、念を押すなら「確認」が必要だろうな
ところで、<div id="div1"><div id="div2><p></p></div></div> なら上下関係が全くなくなるが、それも「確認」が必要だと思うか？
で、テキストエディタとしての上下なら
(1) 下
(2) 一番上
(3) ケースバイケース。div2の上にあるならdiv1直下を検出し、div2の下にあるならdiv2直下を検出。
という回答になる事がなぜ分からない？
(4), (5) に関してはdiv1配下とdiv1外では明らかに構造が違うし、他人のサイトに適用したいのか、自分のサイトに適用したいのかでも変わるし、ぶっちゃけ最終目標次第で変わる
最適解は可否ではなく、目的で決まるからまじめにやるなら「最終目標」を先に聞く方がいいと思うがね >>481
DOMツリーの上下とテキストエディタの上下って同じじゃあないの？ >>477
別にどうも線でいいと思う
難しいものを作っていく内に技術が手につくので、それをもとに新しいものを作り出すことができるようになる >>481が頭に浮かんだとしても上か下かは必ずしも明確ではない
それを確認したということだろ
仕事の手順として普通のことを一人が粘着してるだけ
上に書かれてる通り質問者の明確な意図を確定できないから続けても無意味 すまん、アンカミス
>>450ね
それが"思う"で話進めても無意味
よって終了 >>486
「div1から後方に探索」で十分意味が通じると思うが >>477
普通のウィジェットは、jQuery UI にあるだろ？ Edge でテストしていますが、ブラウザ内の<iframe>に、
2chのHTMLは読み込めて、表示もされますが、
そのHTMLが、クロスドメイン制限により、jQueryで取得できません
2chのHTMLを、ブラウザ内に読み込んで、DOMを解析したい。
やり方を教えて >>491
phpでローカルに読み込んでから取得すれば？ >>252
の「こらこら団報告書生成」ツールを、ピラフがPowerShellで作ったけど、
Windowsに限定されるから、JavaScriptでも作ろうかなと思って
サーバーを立てていないと、JSONPでもダメだった
ブラウザからのクロスドメインは難しいから、
YQL (Yahoo! Query Language)のサービスを使って、クロスドメインを可能にする、
jquery.xdomainajax.js プラグインしかないのか？
何か他に、OSSのライブラリは無いかな？
dojox にあるのか？ なんでそんなめんどくさいことをしてるのか分からん
phpのfile_get_contents()で瞬殺じゃん >>482
DOMツリーに二次元的な意味はないから上下の概念もない
>454のいう上下が「親子」なのか開発者ツールでDOMツリーを展開した時の上下の位置関係なのか分からないって事とでしょ
「確認(>454)」の「確認(>481)」に対して答えがないので、実際どういう意味だったのかは>454だけが知るところだろうね ツリーと言ってる時点で上下あるじゃんｗ
ディレクトリツリーだって上あるだろ ディレクトリツリーで上とか下とか言っちゃう人なのか DOMで上下なんて言わんから気持ちは分からんでもない
DOMツリーだって開発者ツールがたまたま上下に展開しているだけでただのイメージ図だしな >>498
エクスプローラー起動してみ
↑ってボタンが有るだろ >>501
それは親ディレクトリに移動の意味だよね
「上=親」の認識でいいの？
エクスプローラとDOMを同一視するのにも疑問はあるけど > それは親ディレクトリに移動の意味だよね
あえていうなら、[上の階層へ移動] の意味の [上へ] だな [↑] ボタンが「上」なら [←] ボタンは「左」なの？ >>497
DOMでは上下と前後は同じ意味と思うが >>504
前、後ろだろ？
どっちが前かって？
ビデオのリモコンでも見るといいよｗ DOM 仕様では階層関係に上（above や upper）や下（ below や lower ）という語が使われることはないな
常に親子か子孫先祖 仕様が読めないから「上」や「前」と書いてるのだと思うよ
既に何人かで齟齬が出ているし、質問者と>>454の間でも認識違いが生まれるだろうね >>454の(1)は質問者に不安だったから上下と書いたまでで親子関係ではない
その前の探索の流れが深さより方向性がでてたから
素人的に前後はとらえようによってはどちらにでも取れる
上下なら画面で見たままなのでそう表現しただけ
親子は(3)で書いてある
もっともそれらも曖昧ではあったな https://github.com/padolsey-archive/jquery.fn/blob/master/cross-domain-ajax/jquery.xdomainajax.js
ブラウザからのクロスドメインは出来なかったが、
jqueryのプラグインの、xdomainajax.js を使ったら、
YQL (Yahoo! Query Language)のサービスを使って、2ch のHTMLを取得できた
ただ、xdomainajax.jsは、非推奨のsuccess を使っている。
fork して、deferred.done/fail に改造した物はあるかな？ >>511
そこまで分かっているなら .then() で書き換えればいい
>>1の4行目を読んで出直してきなさい >>511
自己レス。
結局、jquery.xdomainajax.js を使わず、
jQueryから直接、YQL を使って、2ch のHTMLを取得できた
var url = "http://hayabusa6.2ch.net/test/read.cgi/linux/1479499953/6";;
// 全体の設定
$.ajaxSetup({
data: {format: 'xml'},
timeout: 60 * 1000
});
var YQL = 'http://query.yahooapis.com/v1/public/yql?callback=?',
query = 'select * from html where url="'
+ url + '" and xpath="*"';
$.ajax( "http://query.yahooapis.com/v1/public/yql?q="; + query )
.done(function(data) {
var jqObj = $(data).find('dt');
console.log('jqObj.length = ' + jqObj.length, '\n', jqObj);
})
.fail(function(data) {
console.log('data');
}); >>273のアドバイスは徹底放置か
作り終わるまで延々と質問しそうだな、この人は よく見てなかったけどdatで取得してないの？html取得してるの？アホなの？ dat？ 意味が分からない。
漏れは、2chのHTMLを取得して、その中の特定のタグを、取り出している
2chのHTMLには、2種類あって、<dt> があるものと、
[data-id=999] のように、レス番号で取り出すものがある >>516
普通はdatファイルからスレを操作する
htmlファイルから操作するアホはおらん
このスレのdatファイル
https://goo.gl/B1I8Ge >>252
の「こらこら団報告書生成」ツールも、ピラフがPowerShellで作ったツールも、
2ch からHTMLを取得して、正規表現で、特定のタグを抜き出している
datファイルは、知らなかった よろしくお願いします。
画面上に常に表示するメニューで各アンカーにスクロールするようにしたいです。
○px下がったら下から「上に戻る」ボタンを出すjqueryを元にちょっと修正してみたのですが、画面リロード後の動作が
うまくいきません。
1.スクロールして少し下がったら出てくるようにしたいのに最初から出てる。(一度下げて上に戻すと消える)
2.リロードして1回目のクリック時だけスクロールしないで移動してしまう(するするっと動かないでぱっと移動する)
また、リロードしてすぐ1回目のクリック時だけ上余白が効かない(var headerHight分下がらない)
以下ソースですが、どこを修正したらいいでしょうか?
長いと怒られたので次に記載します… >>519
コードはjsfiddleにでもUPしてくれ
複数レスにまたがってコードを分割して投稿するのはレスの無駄だから 前半
// JavaScript Document
$(function() {
var showFlag = false;
var topBtn = $('#ri-menu');
topBtn.css('bottom', '-50px');
var showFlag = false;
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
if (showFlag == false) {
showFlag = true;
topBtn.stop().animate({'right' : '10px'}, 200); }
} else {
if (showFlag) {
showFlag = false;
topBtn.stop().animate({'right' : '-200px'}, 200);
}
}
}); >>525
ReferenceError: $ is not defined になっている上にHTML/CSSがないので動かない
$('#ri-menu') が存在しないからな
[JavaScript] ボタンを押して jquery.js を読み込むのは当然として、諸々を動くコードにしてくれないかね >>526 さん
返答ありがとうございます。
jsfiddleの使い方がよく分かって無いのでちゃんとなっているかどうか不安ですが…
html部分はどの程度貼り付けたらいいのでしょうか?
とりあえず、そのボタン部分とcss、移動先は貼りつけました。
あと、[JavaScript] ボタンを押して jquery1.9.1 を選択してみました。(実際は1.10.1使ってます。)
https://jsfiddle.net/x01yb2ga/6/
これでRUNをクリックしたら、何となくですけど同じような現象になりました! IE11からでは、2chのdatファイルにアクセスできないかも。
規格が変わったと言われる
漏れは、専ブラ開発者ではないし、
2chの規格には、色々あるから難しい
ひとまずHTMLから、特定のタグを抜き出しておく >>528
取れる
2ch.netじゃなくscの方を使う
このスレのdatファイル
https://goo.gl/B1I8Ge >>528
前から思ってるけど、名前は「NG抜き出しツール作成中」とかにしたほうが良くない？
初めてみた人はなんの書き込みかも分からないから、全く手伝ってもらえないよ
わかりやすい名前なら、優しい人が気づいて協力してくれると思う >>527
メニュー表示はcssの#ri-menuをright: -200px;に
一番上以外でリロードされた時に表示させるなら
scrollイベント登録後、$(window).trigger("scroll");でイベント強制発火させる
１回目スクロールしないのはtopBtn.clickで囲ってるのが余計
メニューがクリックされてからイベント登録したんじゃその回は発動しない 漏れは、依頼者じゃないよ。
最初に作っていた、271 だよ。
ただ、怪物ピラフがPowerShellで、あっという間に作ってしまったからw
2chのdatファイルは、仕様が変わるかもしれないし、
契約者以外が使うと、業務妨害で逮捕されるかもしれないし、
危険だから、やめておくわ
検索しても、怖い事ばかり書いてあって、プラス面が無い datファイルの仕様は長らく変わってないがな
それとも、datファイルの仕様が変わっても出力htmlファイルの仕様が変わらないと本気で信じているのだろうか 契約者以外が無断で、APIを使ったら即逮捕ですよとか、
2chの運営会社は、怖い事ばっかり書いてる
こいつら、ヤクザっぽい 気になるなら、datを公開しているscの規約を確かめるべき <div class="date">2016/12/26(月) 13:43:51.12 </div>
<div class="date">2017/04/19(水) 22:11:42.38 ID:???</div>
<div class="date">2015/07/28(火) 19:44:02.47 ID:UH8Hs44C0</div>
<dt>6 ：<a href="mailto:sage"><b>login:Penguin</b></a>：2017/03/20(月) 00:15:08.66 ID:IK95VxlG</dt>
こらこら団では、日時・IDさえ取れればよいけど、4 タイプある。
ID が無かったり、??? やアルファベットなど、様々な仕様を作っている。
設計が素人で、手に負えない
datファイルでは、次のデータとの切れ目が分からないから、困る。
むしろHTMLで取得した方が、データの終わりにタグがあるから、判別しやすい datファイルはごく単純なCSVだから一意な処理でコードを書けるでしょ 【2chまとめ対策？】２ちゃんねるがdatを廃止！
今後はAPIでの提供で無断でクロールすると違法に！
http://www.yukawanet.com/archives/4827167.html
やっぱり、契約者以外が無断で、datファイルにアクセスすると、逮捕されそう
逮捕されるのも、馬鹿らしい。
HTMLから、データを取得しておくわ scの管理人は2ちゃんねるの管理人とは別なんだがな >>539
2ちゃんねるの主張を遵守するならAPIを使用せずにアクセスする事を禁じているから、DOMでアクセスするのもNGだと思うけど
https://developer.2ch.net/ で開発者登録を申請すべきだよ datデータ取得は駄目と認識している人が、なぜWebスクレイピングが許可されると思ったんだろ datもHTMLも公開情報だよ
datだけ禁止してHTMLを許可する明確な理由がない htmlでもクロールしてることはバレバレなんだよなぁ
結局逮捕されるリスクは変わらないんだが >>531 さん
ありがとうございます!
無事予定通りの動きになりました!! sc は、2chを回って、データを収集しているから、タイムラグがあるし、
2chから禁止される可能性が高い
ツールでアクセスしても、手入力でアクセスしても、基本的には同じ
～/1～1000
みたいに、スレの全データを、頻繁に取得していれば、
その人が業務妨害で逮捕される
ツール製作者としては、1要求毎に2秒ほど、sleep しておく。
要求も、10～20ぐらいに制限しておく
まあそれでも、2chぐらい怖い会社なら、ツール製作者も刑事告訴してくるかも。
2chは。ちょっとでも無断でAPIにアクセスすれば逮捕するぞ、
って公言している会社だから
本当は、こういう会社とは、関わり合いにならない方がいい。
アクセスする者に、こういう脅しをするなど、あきらかに普通の会社とは違うから SCからのアクセスなんかちょっと本気出せば締め出せると思うのだがなんで取り組まないんだ？
ひょっとして茶番なのか？ >>550
いたちごっこだから。
締め出した所で本質的に2chがアカウントなしに
見れるものである以上、回避策はある。
だからそんなものに頼るよりも、
法律を使って正々堂々と対応したほうが効率がいい。 ユーザーに受け入れられる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 上の関数の場合 >>653
jQuery.prototype.functionName
jQuery.fn.functionName わざと難しくしてるか説明できないか
いずれにしろ性格悪いのは間違いなさそう $.fn.myMethod = function() {
console.log(Object.getPrototypeOf(this));
}; くだらないことやってんなｗ
俺が終わらせてやるよ。
>>651
JavaやC#のクラスベースと呼ばれるオブジェクト指向の
thisはクラスのインスタンス自身と明確に決まってる。
だけどJavaScriptの場合そうとは限らない。
thisは呼び出し方で決まる。
obj.foo() と呼び出せば、fooの中でthisはobjになるし、
obj.foo.call(data) と呼び出せば、fooの中でthisはdataになる
つまり「この場合」とは "呼び出し側" の "呼び出し方" で決まる。
"呼び出され側" ではないことに注意な。
単純なライブラリであれば通常は、"呼び出し側" は俺らで書くことが多いが
ライブラリのプラグイン用のような仕組みや、イベントハンドラでは、
"呼び出し側" はライブラリ側が担当し、俺らは "呼び出され側" を書くことになる。
その場合に、 "呼び出され側" でthisがどうなるかは "呼び出し側" のライブラリの仕様によるというわけだ
今回の「この場合」とはjQueryのプラグインの場合は、 thisが
jQueryオブジェクトになるとjQueryの仕様で決まっている >>くだらないことやってんなｗ
俺が終わらせてやるよ。
www 本当に終わったな。
見事に別の話にすり替わっとるｗ どこにでも長々説明下手いるだろうに一々きにするなよ >>655,657
これが「煽っても無駄」というあれか
曖昧な質問にはヒントとなるキーワードやURLだけを返す
そういう質問者は大抵、「質問した内容以上に基礎知識が身についてない」ので、詳しい説明は時間の無駄と考えるからだ
(与えたヒントからそれなりに質問内容が絞り込んだ質問に発展するなら、その時にまた考えるがね)
だから、質問が具体的かつ分からない箇所が十分に小さな範囲なら、より詳しく回答する
実際のところ、>>656が十分なヒントを与えてくれていると思うけどな
それでも分からないなら、prototypeチェーンでぐぐれ(To: >>651) console.log($.fn.jquery);
console.log($().jquery); ここは質問スレ
これだけヒントを出して貰っていればで十分だろ？
というか、ちょっと検索すれば学習できることだが >>669
回りくどい
$(・・・)の場合→
thisだけでいい場合→
それだけ >>675
それだけってお前何も書いてないやんｗ
重要なのは→の右側だろ ヒントは出ているが、それを理解する頭がないか、質問を具体化する頭がないか、のどちらか 自分がわかるから相手もわかると思ってるのだろうな
後輩やら持ったことないのだろう 本当に理解しようと思う人には十分答えになっている
しかし、教えてくれくれ厨にはこのヒントはこたえるよな スマン抜けてた
「わかりやすく」答えられないのを濁してるのだろ 後輩と見知らぬ他人に教えるのでは全く状況が違うが、6>84は後輩に教えた経験があるのかね…
通常、後輩を教育する時には後輩の理解度を図る質問をしてから、基礎から段階を踏んで覚えさせる
だから、>>651のような曖昧な質問はさせないし、そんな質問が来たら説教ものだ
>>653の「難しい」も具体化出来てないから、質問として成り立ってない
基礎から質疑応答を繰り返して覚えさせるのは相当時間がかかるが、後で仕事で返して貰うための投資なのでそれはいい
が、赤の他人にそこまでやる義理は全くない
「で、君はどこまで分かってるんだ？」「prototypeは分かるか？」「関数は分かるか？」「今まで何を学習した？」
そんなやりとりを繰り返して質問者を答えに導くのは、このスレの役目ではないと思うんだがね Object.getPrototypeOf(this);
これを理解出来ない時点で何を説いても無駄 >>690
> だから、>>651のような曖昧な質問はさせないし、そんな質問が来たら説教ものだ
じゃあためにし、説教してみてよ？
自分で説教ものだっていったんだから
当然できるよね？
お前のレスみてると、なんかお前の説教のレベルが低い気がするんでねｗ >>690
誰からも相手にされない基地外みたいな輩だな >>692
「赤の他人にそこまでする時間はない」とはっきりいわなければ伝わらないのか
なぜ2chで家庭教師なみに一人の人に教えこまねばならんのだ
俺はそんな時間はないが、文句があるなら暇なあなたが説明すればいいんじゃないかね
それとも、あなたは質問者本人なのか？ >>695
伝わらないに決まってるだろ。
最初からそう言えや。
Q 「○○をするにはどうしたら良いですか？」
A 「赤の他人にそこまでする時間はない」
って答えてればいいだろ >>696
> 伝わらないに決まってるだろ。
「赤の他人にそこまでやる義理は全くない」をあなたが読み飛ばしただけ
> Q 「○○をするにはどうしたら良いですか？」
> A 「赤の他人にそこまでする時間はない」
この書き方だと質問全般に回答しないように読めるが、質問者の理解度が分かる質問をすれば、答える
問題点を明確化しても内容を全く読まずに「回答しない」という都合が悪い事実だけを取り上げてあなたは煽ってるだけ
日本語の読解力を身に付ける事をお勧めする >>696
あと、繰り返すようだが、他人を煽り散らす暇があるなら、あなた自身が回答しろ
俺は回答しない理由を釈明したが、あなたは回答するべきだという
あなたがそういうなら、他人任せにせず、あなた自身が解決に向かうように自分から働きかけるべきだ 質問をするのは勝手だけど思い通りの解答を期待するのは間違い
ヒントでもレスくれるだけ有り難いと思いなさい >>658
質問者です。ありがとうございます、そして遅くなりすみません
「 "呼び出し側" のライブラリの仕様によるというわけだ」まではわかります
インスタンスもなんとなくですが
ただ$(・・・)有無、区別が曖昧というか理解度が浅いようです
で、>>692は質問者ではないです >>700
jQueryの話だろ？
イベントハンドラ内のthisはDOM要素
ぐらいしか意識することはないぞ。
jQueryプラグインなんて普通書かないだろ？
jQueryプラグインの場合はthisがjQueryオブジェクトってだけだ。 >>701
>jQueryの話だろ？
そうです
ネイティブjsも書きますがjQでの質問です
>jQueryプラグインなんて普通書かないだろ？
書きません >>700
this は何を差すのか？それだけ
バカ セレクタが従兄弟関係にあれば処理って無理？
特定のクラスがあって、親に遡り、その兄弟の子供に
処理を加えたい
つまりイトコ。ググっても出てこないんだよな… >>707
兄弟 = $(特定のクラス).closest(親);
兄弟.children(); >>708さん
納得行く結果に辿りつきましたありがとう( TДT)
2ちゃん住人最強( TДT) 自演を疑うやつは、だいたい劣等感が強くひがみ根性が強いやつ
そういうやつは感謝された人間や、称賛を浴びた人間を目ざとく思う
事もあろうに素直に客観でみれず難癖をつけだす始末
なぜ、そう思うか？私がそうだからである
自分で盛り上げるネタもないやつが偉そうに
単発批判してんじゃねーぞカス
IDつかないスレで自演とかナンセンスなこといってる愚かさに気づけよw 相変わらずここは・・
ヒント、回答とか言ってるわりにずれてるし
質問者のほうがレベル上では >>718
どうせお前このスレを荒らしに来ただけだろ？
数日間レスが止まってるところに、誰宛かも
わからないこと書き込んで。ばればれ 似たようなオブジェクト２つを変える関数を作っています。
仮に２つは$('#hoge-L')と$('#hoge-R')とします。将来的に２つを超えることはありません。
実際は様々な処理をしていますがここでは説明のため色を変えるだけとします。
様々な処理と言ってもLとRの違いだけで関数内の他は同じコードで共通化しています。
実際は色を変える関数、○○を変える関数など多数あり、全てLとRを操作します。
LとRは、片方だけ変えることも両方変えることもあります。
LとRの変更色は同じ場合も違う場合もあります。
で、とりあえずは
function changeColor(args,c){
$('#hoge-' + args).～cに色変更;
}
changeColor('L',c1);
としましたが両方変える場合
changeColor('R',c2);
と２回呼び出さなくてはなりません。
これを１回呼び出しにしたいのですがどんな方法がいいでしょうか。 721の続き
(1)配列渡し
changeColor(['R',c2]);
changeColor(['L',c1,'R',c2]);
(2)引数を２つ分に固定しnull渡し
changeColor(null,null,'R',c2]);
(3)可変長引数
arguments使用
(4)(2)に加え部分適用
var pmL = function(L,c1){
return changeColor(L,c1,null,null);
}
pmL(L,c1);
とRの分。関数やたら増えますが。
(5)名前付き引数
changeColor({L:c1,R:c2});
最も自然な気がしますが引数が少ない今回の件でどうかと。
(6)その他
皆さんならどうしますか。 idなしかよ
$('#hoge-'+args)
じゃなくて
$(arg)
にして
"#hoge-L,#hoge-R"
を渡すってわけにはいかんのかね changeColorなどを実行するのに何かしらのイベントがあるとして
＞LとRは、片方だけ変えることも両方変えることも
とのことだから、「LとRそれぞれ操作 or LとR同時に操作」に対応したイベント発火ボタン要素みたいなものが複数あるパターンとすると
https://jsfiddle.net/wd8gzh70/ >>724
修正中だった？ 割り込んでごめんｗ
俺ならこうする
https://jsfiddle.net/wd8gzh70/3/
コード（処理）をごちゃごちゃ書きたくなく。
単なる定義（CSS）にすることでシンプルになる。
CSSが苦手な人は、CSSの量が増えるのが嫌だろうけどｗ
で、こっちはCSSをSCSSに変えて短くしたもの
https://jsfiddle.net/wd8gzh70/4/ >>721
LとRに両方に必ず同じものを適用するのでないなら
単純に二回呼び出したほうが良い。
そして>>723を取り入れた方がいい。
そうすれば、両方とも同じなら一回でいい
それから○○を変える関数とは全部CSSの内容か？
どんな処理をしたいのかによるが>>726を参考にJavaScriptから
CSSを変えるのではなくクラス名を変えたほうが良いかもしれない。
で、色を変えるだけというかCSSで変えられる物だけなら、
changeColorなんて関数はいらないだろ？
$('#hoge-L').css({color: 'red', fontSize: '1.5rem'});
$('#hoge-R').css({color: 'blue', fontSize: '2rem'});
とか二回呼び出して行えばいい
両方同じなら、
$('#hoge-L, #hoge-R').css({color: 'red', fontSize: '1.5rem'});
と書ける
changeColorは例で、実際にはcssメソッド以外の関数も使うんだっていうのなら、
changeHogeHoge('#hoge-L, #hoge-R', パラメータ) とすればいいし
jQueryプラグインにしてしまえば
$('#hoge-L, #hoge-R').hogehoge(パラメータ)
と書けるようにもできる。 CSSってCSSソース中のプロパティそのものを動的に変更できるのかな
例えば.hoge{color:#ff0000;}のCSSソースがあって
javascriptでCSS.class.hoge.color=#00ff00みたいに >>728
それならjs一行で解決たな。
その程度ならjQueryよませる必要なし遅くなるだけだよ。 element.style.colorじゃなくCSS（仮）.class.hoge.color
できたら便利だけどさすがに無理か すみません、HTMLの情報が不足でした。その他不足と思われることの補足です。
単純化したイメージはこんな感じです。
<select id="left-color">
<option>red</option>
<option>blue</option>
～
</select>
<select id="left-size">
<option>12</option>
<option>14</option>
～
</select>
他にも同様のselectがあり、左右同じ分あります。
各selectごとにchangeイベントで#hoge～を操作しています。「○○を変える関数など多数」はこのことです。これが増える可能性は高いです。
各selectの発火は無視して最後に確定ボタンでという操作はこの件ではGUI上行っていません。
Lだけ、RだけなどのselectはGUI上作れません。読み替えということで参考にはなります。
LR両方変更の一例は全リセットをイメージしていただけるとわかりやすいかもしれません。
各関数の目的は見通し上おおまか１つにしています。
>"#hoge-L,#hoge-R"を渡す
発火したselectのidの一部を渡してるだけですのでそれでもいいです。
それとCSSは::after駆使して複雑な図形描くなどでなければ特に苦手ではないです。 >>727
>○○を変える関数とは全部CSSの内容か？
位置変更（jsで取得してjsで再設定）などもあります。初期位置はCSSですが動的に変更があります。
>changeColorなんて関数はいらないだろ？
他の部分数箇所から各関数の１つないし複数を呼び出しています。
>$('#hoge-L, #hoge-R').hogehoge(パラメータ)
LRそれぞれのパラメータを全部連想配列にしてしまえば手っ取り早いですが、１つの変更だけで全部見るのも不自然さや速度面でどうかと今のようになっています（他にも理由あったような）。
２回呼び出しの頻度は各々呼び出しに比べれば少ないので前者でいいのかもしれませんね。 > LRそれぞれのパラメータを全部連想配列にしてしまえば手っ取り早いですが、
一番やってはいけないパターン 関数は「何をどうする」
「何を」をどうするか聞かれてるのに「どうする」をゴチャゴチャやってるのはなぜなのかな
引数の渡し方について質問者についていけてないのかな それ言ったら全てそうだ
選択問題なのにどれも答えてないな 煽りばかりですな
以降は例外無く口出ししたくなる基地外のターン↓ 質問者＞＞＞回答者
いつも通りｗ
質問文読んでないし可変長引数とか意味わからないんじゃね 質問を熟読した>>742さんが回答してくれるそうですﾜｸﾃｶ ぶっちゃけどれも似たり寄ったり
(4)はfunctionが増えて利点はないだろう
それより>>735の回答はどうなった？ うむ、ここでは説明のため色を変えるだけとしますと書いてるんだから
渡した先のことはさほど書く必要ないんだよな
相手はそれくらいわかるだろ TVで報道されない真実
集計マシーン ムサシ
作ってる会社は？
ｗｗｗｗ
一番触れられたくない部分ｗｗｗ 税金垂れ流しで身内がばぶってる糞安倍特需 boxsliderについて質問です。
すでにsliderが設定されてる画像データがあります。
タブは6つで、それぞれにsliderが設定されてる画像データがあります。
そこに
ajaxで取得してきた新たなデータをおきかえて表示したいです。
1つめのタブはちゃんと表示されましたが、
後ろに隠れているタブのデータが表示されません。
この場合何か再設定をしないといけなかったりするのでしょうか？ jQuery プラグインの、bxSlider でも使えば？
【jQuery】超簡単jQueryスライダー［bxSlider］の使い方
http://on-ze.com/archives/1658 ajax通信について教えてください。
以下のスクリプトを組んでいるのですが、通信が完了しているにも関わらず、
completeのalertが実行されません。
＜スクリプト＞
$.ajax({
(略)
success: function(data) {
$('#result').html(data);
(略)
complete: function() {
alert("終了");
}
サーブレット側では、
response.getWriter().write("完了しました。");
にてメッセージを送信し、jsp側のdivである#resultにて表示がされているので
通信は正常に行われていると思います。
しかし、completeが実行されていないということは、サーブレットからの
メッセージを受信した状態であっても通信が完了していないと
みなさえれているということでしょうか。
原因がわからず、困っております。
宜しくお願いします。 webサイトで記事ではなく図のあるページ。
ユーザーがform操作によりページ内のある範囲や部品を表示・非表示。
その方法の区別や使い方で質問です。
(1)CSSに初期値を持たせる
SS…#hoge {display: none;}
JS…$('#hoge').show()、～.hide();
(2)JSに初期値を持たせる
SS….hide {display: none;}
JS…$('#hoge').addClass('hide')、～.removeClass('hide')
(3)HTTMLに初期値を持たせる
HTML…<～ class="hide">
JS…$('#hoge').addClass('hide')、～.removeClass('hide')
(2)でデフォが非表示の場合、ページ読み込み時の見た目悪いので下の方や小さい部品が主です。
みなさんはどれかに統一？
併用の場合その区別の仕方（○○の場合は(1)など）教えてください。 show と hide という単語は使わない。
メソッド名、クラス名、両方の意味でだ
showに相当するものは、display: block等だし
hideにそうとするものは、display: noneなのだから
メソッド名やクラス名にshowやhideを使う必要はない
JavaScriptでは "状態" で考えろ
JavaScriptは状態（クラス）を変えるだけだ
CSSではある状態で、表示するかどうかを書くだけだ 初期値は、チェックボックスであればcheckedで指定できるだろ
<input type="checkbox" class="parts" value="show" >
<input type="checkbox" class="parts" value="hide" checked>
この値で表示非表示を決めるのだからJavaScriptはいらんわな
.parts[value="show"] { display: block; }
.parts[value="hide"] { display: none; } >>753
それは典型的ダメパターン
再読み込みで前の状態が残る場合がある 加えて言うと、checkedは一応記述しておくがな
それと変更をどうするかなので全く答えになってない >>752
単語はわかりわすく書き換えたまでです。
>showに相当するものは、display: block等だし
>hideにそうとするものは、display: noneなのだから
承知です。途中overflowが入ることも。 >>754
> 再読み込みで前の状態が残る場合がある
なんで残ったらダメんだよ？
ブラウザでバッグしても残るだろうが は？何言ってるんだコイツ
ダメに決まってるだろ
初期化の意味なし >>758
> ダメに決まってるだろ
お前が決めただけだろ？
ページ内のある範囲や部品を表示・非表示っていうのは
例えばショップの商品絞込機能と同じなわけだが、
リロードしても今絞り込んでる条件なんか変わらねーよ 残るか残らないかって確実に決まるんだっけ？
リロードで確実に残したいものはちゃんとルーティングするかなぁ >>761
httpヘッダなどでも決まるよ。
基本ブラウザで制御させる部分だから自分で（JavaScript）で
制御するのはやめてブラウザに任せたほうが良い。
一番ダメなのはフォームとフォームでない部分を混ぜること
独自のチェックボックス風のものをJavaScriptで自作とかしたりしてね。
そうすると画面の見た目とJavaScriptの処理結果がずれることになる。
なんでだーといいながら、ページ表示時にJavaScriptで値を入れたり
ページの進むと戻るしたときにおかしくなって、
setTimeoutとかで強制的に再描画とかして泥沼に陥ることになるｗ
こういうのは状態の保持にフォームを使わないから。そしてフォームの値で
見た目をCSSで変更させないから。
一部にJavaScriptを使ったとしても、input type=hiddenなどを使って、
状態の保持にフォームを利用しておけば、確実にブラウザの挙動に
従わせることができるので、シンプルに実装することができる。
JavaScriptも使わずに実装できるので、フォームの値と画面の見た目がずれることもない。 それからフォームの内容をリセットしなければ、
まさにフォームのリセット機能が存在するので
（ input type="reset" or form.reset() ）
実は画面のリロード時に確実にフォームをリセットするのも
フォームを使っていたほうが簡単だったりする。 >>759
> 答えてるほうがレベル低いって・・・
ゴメンな答えるほうがレベル高くてｗ 一つ言い忘れていた。
> 残るか残らないかって確実に決まるんだっけ？
の話だけど、これは要するに
HTMLを修正した時、更新ボタンで画面に変更が反映されるか？
と同じ話なんだよ。
つまりキャッシュ。ブラウザの設定にもよるけど通常は
キャッシュが有効に使われる状態であれば、更新ボタンを
おしても前の画面は変更されないだろう？
ならばフォームの値もそのままなのは当然のこと。
そしてスーパーリロードだとキャッシュが使われる状態でも
リロードされる。フォームの値もリセットだ。
つまり更新を押してもフォームの値が残るっていうのは
バグでも何でも無く、ブラウザの機能なわけさ。 >>749
success, complete は、古いのかな？
今は、done, fail とか。
ヌーのサイトの情報は、古いから、気を付けな
// 全体の設定
$.ajaxSetup({
data: {format: 'xml'},
timeout: 60 * 1000
});
$.ajax( url )
.done(function( data, textStatus, jqXHR ) { })
.fail(function( jqXHR, textStatus, errorThrown ) { }); >>761
初期値はブラウザによって不確定だからタチ悪い
よってCSSかJSでイニシャライズが必要
で、問題は変更の方法だろ
CSSでdisplay:none;としておきたいとこだがaddClassだと!important使わないと、
またshow()の類でないと、ってとこがミソなんだよな フォームのリセットはリセットすればいいだけだから別によかろう。
クラスの付け方と変え方をどうしてる？って話なのにな。 form操作により、と書きましたがそれ以外に関連したりしなかったりで表示・非表示があります。
よって再表示で
>制御するのはやめてブラウザに任せたほうが良い。
>再読み込みで前の状態が残る
は困る部分もあります。formとは分けてます。後だしですみません。
>独自のチェックボックス風のものをJavaScriptで自作
そんなことはしてません。一応。 >>767
> 初期値はブラウザによって不確定だからタチ悪い
それを言ったら進むや戻るを押したときだって
ブラウザ依存なんだが。
不確定なんじゃなくて、キャッシュが使われると言うべき。
キャッシュはブラウザの設定でユーザビリティ向上のために
使われるものなので、それを無効にする方向じゃなくて
活かす方向で作るべきだよ >>769
> は困る部分もあります。
そもそも困る作り方なのが悪い。
>>770でも書いたが、例えばブラウザの設定で
キャッシュを出来る限り使う設定にしていれば
JavaScriptの状態が保存されることも有る。
保存されないことも有る。
そういったことを制御するのは大変。
今回の話でいえば単にリロードしても状態は残る
（正確に言えばブラウザの設定にもよる）わけだが
それで困ることはないだろ。通常はリロードしても
フォーム内容は維持されるものなんだから >>767
> CSSでdisplay:none;としておきたいとこだがaddClassだと!important使わないと、
> またshow()の類でないと、ってとこがミソなんだよな
!importantを使うのは作り方が悪い。
適切にaddClassを使えば、クラスを設定した時点で
もとの状態よりも優先順位の点数があがるので!importantなんか
使わずに作れる。
行き当たりばったりでスタイルを適用してるから
わけわからんくなるんだよ。 >>770
だから何としか
>>771
見たことないのに行き当たりばったりって
わけわからなくもなってないのだが >>771
君が小規模なコードしか書いたことないことはよくわかった。 基本addClassでいいと思うが（質問者もそれくらいわかってるかと）
大規模になって1つの要素に複雑にクラスがからむ場合、タグが
<hoge class="aaa bbb ccc ddd・・・> となってくるからな
表示関係、見た目デザインはＳＳで管理したいのもわかる
その要素の他の操作（値操作など）、他の要素の操作などもJS（JQ）でいじってるのだし
(1)でも悪くはないと思う ある程度は仕方ないが、HTMLはなるべくコンテンツにしぼって
操作するため装飾するためのidやclassだけにしたいな。
くどいがなるべくだがね。 ＪＱのshow()などでいじるにしても簡単な部分はaddClassで行ってもいい
問題はその線引き、というかそれが元々の質問だろ
前振り長かったな～ >>775とか
まあ実際にコードを示さないと、どれだけシンプルに
作れるかってのがわからんのだろうな（苦笑）
と思ったねｗ
まずこっち。JavaScriptのコードは一切ない
https://jsbin.com/nozotuyaci/edit?html,css,output
これの何が良いかというと、表示非表示をする"処理"がなくて
HTMLとCSSによる"定義"のみで表しているということ
定義なので「こういう場合」は「こうなる」ことがはっきりしているので
～してから～するみたいな条件を織り交ぜた流れがなくなるのでバグが少なくなる
ただこのやり方には欠点があって今のCSSは親要素を参照とかできないので
HTMLの構造に制約が出る。 それを改善したのがこっち
https://jsbin.com/japiripaxo/1/edit?html,css,js,output
JavaScrpitのコードは特定の値をinput type="hidden"要素にコピーしているだけ
汎用的でコードも単純なのでバグの可能性は小さくなる
input type="hidden"にコピーしているのはキャッシュが有効に使われるようにするため
今回フォームを使うということで、検索フォームのようなものもあるかもしれない。
その場合ブラウザの標準の動きはリロードした時にフォームに前の値が残る。
値が残ったり残らなかったりするのはありえないので統一しなければいけない。
デフォルトの動きに統一する場合、input type="hidden"にコピーすることで
ブラウザの標準の動きにあわせることができる。
またブラウザの標準の動きをやめてリロード時に初期化したい場合は
form.reset()を呼び出せばいい。
また別のやり方として、input type="hidden"ではなく特定の要素、
大抵は親のブロックの何処かのclassなどに値を入れるやり方もある。
だけどこっちもフォームと混ぜた時に、リロードで値が残ったり
残らなかったりするので気をつけないといけない。 あと今はリロードの話しかしていないが、もう一つ気をつけないといけないのが
ブラウザの進むと戻る
http://nmi.jp/archives/273
> スマートフォンを含む最近のブラウザでは、戻るボタンで前のページに戻った際に、
> JavaScriptも含めて前回の最後の状態を復元します（Back Forward Cacheと呼ばれます）。
onunloadに何か入れていれば無効になるとは言え、
なぜこんな機能があるかというと、そっちの方がユーザビリティが高いから。
せっかく高くしてくれたユーザビリティを低下されるのは悪いやり方。
その場合、戻るを押した時にキャッシュされるかどうか？なんて
いちいち考えたくないだろう？
一番楽な方法はブラウザの標準の挙動に合わせる方法。
フォームだけで実現する または input type="hidden" に入れていれば
フォームの状態が残ってようが残ってまいが、そんなことは気にせずに
現在の状態という定義から簡単に画面を導出できる >>778
今回の話は前提として
>>751より
> ユーザーがform操作によりページ内のある範囲や部品を表示・非表示。
フォームを使う
>>769
> form操作により、と書きましたがそれ以外に関連したりしなかったりで表示・非表示があります。
> よって再表示で
>
> >独自のチェックボックス風のものをJavaScriptで自作
> そんなことはしてません。一応。
フォーム以外も使う。フォームを全く使わないということはない。
ということから、フォームとそれ以外が混じってるという点
つまりブラウザやその設定にもよるがリロードした時や進む・戻るを押した時に
フォームの値は残ってるがJavaScriptの描画結果はリセットされているなどという不整合が
起きる可能性がある。困ったことにこの挙動はブラウザ依存
不整合を起こさないためにはどちらかに統一する。フォームを全く使わないことはありえないので
フォームを使う方で統一する。なので状態をフォームの値として input type="hidden"にいれておけば、
不整合は発生しない。一律にフォームの内容をリセットするというのもあるがこれはユーザビリティの低下を招く。 >>776
cssもこんなことに
hoge {
プロパティ: 値;
プロパティ: 値;
プロパティ: 値;
・・・
プロパティ: 値;
}
↓
hoge {
プロパティ: 値;
プロパティ: 値;
プロパティ: 値;
}
.aaa {プロパティ: 値;}
.bbb {プロパティ: 値;}
.ccc {プロパティ: 値;}
・・・
.xxx {プロパティ: 値;}
クラスが何十にもなると上書きも出てきて視認性が落ちかねない
ライブラリも使っていれば!importantを使わざるをえない場合もある
jQueryなら1行で書ける上にメソッド見れば状態も一目瞭然
何が何でもaddClassだけで済ますのも悪いとは言わないが
保守性からもそれだけにこだわるのは賢明とは思えない >>779
親要素を参照
これホントになんとかしてほしいな
jQueryで散々自由に要素選択できてて、CSSにてこ入れ必要になったとき
親要素にidつけんと、最悪divで囲まないと、ってとき萎える
せめてparentとparents相当なものだけでも
スレチですまん addClassの難点は色変更で#808080の類
実際よくある それとfont-sizeやwidthなど段階的に数パターンの値を当てたいとき
これもまたよくある ページの特徴上、ざっくり書くと遷移時はリセットするとみてください。考慮しなくていいです。
する操作があった場合はメッセージを促しています。ユーザビリティ云々は承知の上です。
ページ全体が作業場になっているイメージなのです。
正確には「form部品を使った～の操作」でした。
resetに相当するボタンはありますがsubmitはありません。
formもありますが上記の方が多いです。これは誤解の元でした。すみません。 >>770
その通りなのですがphpやセキュリティがらみだと面倒でして。
特に後者は誰もが精通してるわけでもないので。
悪意あるページから入ってこられたり。
お問い合わせフォーム程度なら両者楽勝なのですが。
書くまでもないでしょうがユーザビリティとセキュリティの両立に絶対的な正解がない現状なかなか・・・。
おそらくphp有無で質問に影響はないと思ってます。今のところ。 >>787
> ページの特徴上、ざっくり書くと遷移時はリセットするとみてください。考慮しなくていいです。
矛盾してる。
考慮しなくていいならば、遷移時（リロードや戻る）を実行したら
フォームの内容はリセットされなくなる。
検証としてHTMLにtextareaを一個置くだけのフォーム作ってやってみ
フォームの内容がリセットされないのはわかるはず
だから「リセットしたいと考慮する」ならばコードを書かないといけない。
だから何も考慮しなくていい（ブラウザのデフォルトの挙動）でいいじゃんって言ってるんだが。
> resetに相当するボタンはありますがsubmitはありません。
まさかJavaScriptでボタンをクリックしたら、フォームの内容を一個一個初期値に
相当する値に書き換えてるんじゃないだろうね？
input type="reset" ボタンが用意されてるんだからそれを使えばいい。
JavaScriptのコードは一切書かずに初期値に戻る >>791
これは重要な所なので揚げ足取りではない。 input type="hidden" を使用しないでクラスを使う方法
https://jsbin.com/sapehacuro/1/edit?html,css,js
https://output.jsbin.com/sapehacuro/1
Chromeで実行してみればわかるが
他のページに移動してから戻ると、フォームの値は残っているのに
フォームの値で表示される部分は表示されない。
Firefoxだとおそらく大丈夫（Back Forward Cacheとやらの機能）
inputの値はキャッシュされて残るがクラスはキャッシュされないため。
これを回避するには、ページが表示された時に
フォームの内容をクラスに反映させるという処理が必要になる。 クラスを使う場合、form.resetを使えばフォームの値はリセットされる。
だけどFirefoxの場合はJavaScriptのレンダリング結果がキャッシュされるので
フォームはリセットされるが、画面は表示されたままになるはず。
だからFirefoxのためにunloadイベントで適当な処理をして
Back Forward Cacheを無効にする必要があるだろうな。
せっかくブラウザが実装したユーザビリティを高める処理が台無しｗ
ながながとサンプルコードとともに書いたが、
JavaScriptに依存した処理の方があれこれ考えることが
多くなって苦労するんだよ。
不整合は見なかったことにするって考えもあると思うがｗ
一番楽で安定している手法は、基本はHTMLとCSSを用いて制御する方法。
どうしてもできない場合は、JavaScriptで足りない部分だけを補完し、
HTMLとCSSを用いた制御ができるようにすること >>788
入力値が意図した通りに入ってくるとは限らないからそれは１つの手ではある
最悪悪意あるscriptの可能性もある（テキストボックスでなくラジオボタンでさえも）
無論それはサーバサイドで処理するわけだがバリデなど値処理はJavaScript(jQuery)で行うからな
なかなかやるな、>>789よりはるか上いってるわ >>794
ブラウザ判別分岐は将来性含めてなるべく使いたくないな
> HTMLとCSSを用いて制御する方法
で>>783や>>785はどうしてる？ >>795
無理して俺に矛先向けなくていいよｗ
俺に関係ない話だろうが（それすらもわからないレベルなんでしょ？）
本気の入力チェックはサーバー側でやるのは当たり前の話。 >>796
進むとか戻るとかリロードした時の状態は
実際には些細な問題として無視されてるんじゃないかと思う。
通常は見た目だけの問題だから大きな問題に発展することはないだろう。
以前の職場のシステムは、時々ブラウザでこんな操作をすると
おかしくなりますってバグレポートが上がって
その都度行き当たりばったりで直していた。
継ぎ接ぎだらけのやつだったんで、そうするしかなかった。
でもHTMLとCSSを使って制御すれば処理はシンプルになる
（ただし必ずしもコードが少なくなるわけではない
特にCSSはsass使うのを推奨する） >>797
>>798
どうした急に、様子が今までと違って変だぞ でも、まあブラウザ周りで行き当たりばったりはしゃーない
>>796の件は他の人にもききたいわ ページ遷移・ヒストリーなどを考慮するなら、
jQuery Mobile でも使えば？ >>796
このスレには大規模や複雑な案件やったことないのばかりだから答えは期待できないだろう >>801
jQuery Mobileはウェブでスマホネイティブ風な
画面を作るためのUIフレームワーク
ページ遷移やヒストリーだけを扱うものじゃない。
ついでにいうとjQueryの名前がついてるが
jQueryを使っていると言うだけで
jQueryの拡張でもDOM操作ライブラリでもない >>802
上から目線で断じるっていうことはあなたはやったことがあるのだろうけど、炎上ネタだけ提供して何の情報も提供しないあなたは陰湿だと思った >>804
実際あなた含めて答える人いないじゃん
今まですぐレスあったのに
質問の(1)～(3)を1人除いて誰か具体的に「俺は何番」と答えた人いた？
例えばプロフィール入力してもらうくらいならいいが、プログラム的要素が強くなってくるとブラウザ任せともいかない場合もある
HTML/CSSスレでなくここで質問してるということ プロフィール入力してもらうくらい
ではないものってなんだ？ オイオイ大丈夫かここ
嫌なヤツというなら>>752だな
記事ではなくとあるのだからそれなりの動的ページに関係してることはわかるはず
質問に答えた上で加えていうならまだしも
・基本的なことをわかってないと決め付けている
・質問に関係ないことを上から目線 >>807
> 質問に答えた上で加えていうならまだしも
質問に答えてるぞ？
>>753の書き込みから、jsbinにサンプルコードもまで書いたろ？
お前は何をやった？ * HTML側ではcontrolled componentは一律hidden
* JavaScript側で表示/非表示の初期値を持つ
* DOM構築時にJavaScript側の初期値に従ってhidden除去
が好み(Reactに近い振る舞いというのもある) ウェブの世界はHTMLベースとJavaScriptベースの
二極化になってるよね。 >>809
>この値で表示非表示を決めるのだから
その決め付けはおかしい
そこがcheckedだろうが他の要因で表示非表示になるケースも考えられる
単純な表示非表示のチェックボックスとは限らないだろう
もしそうなら他の要因でそのチェックも連動すればいいだけだが >>812
他の要因があるなら、他の要因（複数のinput要素）を
組み合わせればいいだけじゃん
実際に書いてあげなきゃわからない？
↓これ両方がチェックされた時に表示される
<input id="a" type="checkbox">
<input id="b" type="checkbox">
<div>ok</div>
div { display: none}
#a:checked + #b:checked + div { display: block} 8つの要因で決まるとしたら8つ条件並べるわけだ・・・ありえね～ >>814
並べなくていいだろｗ
そのためのsassなんだから それとさ、チェックだけで決まると思ってるの？計算結果で決まる場合は？ ん？ もしかして何もしれないのかもしれないけど、
CSSは、#a:checked だけじゃなくて
＃a[attr="value"]のような任意の値を使うこともできるんだよ。 >>818
その場合は、取得座標から現在地の種類を
判断するところまでがJavaScript
現在地の種類をクラスやフォームに入れておけば
CSSで処理できる。
もっとも取得座標っていうのはマウスの座標だろうし
キャッシュされることはない値だから関係ない話になるけどね >>819
それよく使ってる
JSでその値変えればSSに従って変わるのだが、イコール、含む、始まるなどはできるが範囲指定などはできない
初期設定ならそこまで不要な場合がほとんどだが実行中はそうはいかない場合もよくある >取得座標っていうのはマウスの座標だろうし
このスレなんでこう決め付けるのいるんだろうな >>822
いや、だからCSSには限界があるので、その場合はCSSの限界を
補うような形でJavaScriptを使えって言ったじゃん？
例えば、input type="number"で値の複数の範囲指定したいなら
<input type="number" value="10" data-threshold="0:10:20:30:40">
みたいにして
JavaScriptで値が変化するたびに、data-thresholdの中と値を比較して
0～9ならclassにt0、10～19ならt10、20～29ならt20 とか
入れれば良いんだよ。 >>794で言っていたな
> 一番楽で安定している手法は、基本はHTMLとCSSを用いて制御する方法。
> どうしてもできない場合は、JavaScriptで足りない部分だけを補完し、
> HTMLとCSSを用いた制御ができるようにすること >>826
それはわかってる
上でHTMLとCSSのみに固執してたのがいたから同一人物かと勘違いしてたわ、スマン >>825
質問にしろ全部書けないだろ
長いとそれはそれで読まれないし突っ込まれるし
座標っても領域やサイズなど色々あるのに何その根拠？ってのは俺も思った >>828
ん？ それどうせ俺だろ？
俺は最初から固執してないが、たまたまそのレスでは
javaScriptに言及してなかったんだろ
フォームの話では初期値はHTMLに書いておくのが正しいし
表示非表示はHTMLとCSSで行うのが良い。
どーしてもできないって所は、その場所限定の適当なコードを
書くんじゃなくて、どうやればHTMLとCSSで表示非表示を
制御できるか？を考えて汎用的なパーツにするのが良い。
そうすることでDOM APIでは面倒な、一括して複数の要素に対して
処理を適用できるというjQueryのパワフルな能力を活かすことができる。 >>829
> 座標っても領域やサイズなど色々あるのに何その根拠？ってのは俺も思った
座標って言ってない。「取得座標」だ。
領域やサイズの「取得座標」ってなんのことだ？
サイズの「取得座標」ってなんのことだ？ >>831
いちいち細かい、それを揚げ足とりと言うんだよ
それくらい脳内変換しろよ 明らかに説明が足りないことを言う
誤解するのを狙って、実際に誤解したらそこを執拗に攻撃する。
罠だったんだな。 あ、分かってないと思うけど、フォームっていうのはHTMLの
フォームのことでこれはHTMLであってJavaScriptではないからなｗ >>837
だな
もうこれ以上は不毛なやりとりが続くだけだろう つまり俺だけがまともなことを言って、
そのまともなことを言われるのが気にいらないやつは
煽っておしまいということかね？ｗ
お前はまともなやり取りをしたかって話だよ。 >>805
俺は答えを知らない
知っているのに答えないのと、知らないので答えられないのはまるで違う
あなたはどちらなのかね？
あなたが答えを知っているのなら、他人を冷やかすだけでスレに貢献しない人だ
あなたが答えを知らないのなら、知ったかで確証のないこと(>>802)を書くいい加減な人だ
どちらにしても、信用できる人だとは思えない >>841
俺は>>805じゃないが
質問者に答えてるのは俺だけだったと思うよ >>814
8つの条件の組み合わせを考えると、2^8 = 256 通りの組み合わせ爆発で、
CSS, JavaScript のどちらでも、プログラミングの設計段階で破綻している
こういう仕様を作ったら、ダメ >>844
表示、色、サイズ等を変更するなどよくあるケース
jQueryならチェーンメソッド1行で済む
問題は設計仕様ではなくSSだけで済まそうとするそのやり方 全部SS（スタイルシート？誰も使ってない略語を使うな。恥ずかしい）
でやろうなんて言ってない。
JavaScriptでやるのは状態の管理までで
見た目はスタイルシートでやるという話だ >>846
>JavaScriptでやるのは状態の管理までで
>見た目はスタイルシートでやるという話だ
それは皆わかってるからもういいよ
くどいったらありゃしない
それを踏まえた上で話してんだろ >>848
元はその線引きをどうするということなんだよな
例えば実際、１つの要素にこれらを指定するときみんなはどうしてるのだろう？
表示
<label><input type="radio" name="hoge" value="block" checked>表示</label>
<label><input type="radio" name="hoge" value="none">非表示</label>
色<input type="color">
文字サイズ
<select>
<option>8</option>
<option>10</option>
～
<option>72</option>
</select>
文字サイズは少なければ属性でできなくもないが<option>変更の度にCSSも変えなくてはならないので保守性悪い >>849
そんなものはユーザCSSの範疇なので、作ろうとも思わない >>842
>>776？
唯一答えてるのは776だけだが >>853
頼むからそいつを刺激しないでくれ
餌を与えれば、誰にでも食いついてくる輩だぞ >>852
不必要とはどういうこと？案件によるし君がこの件の何を知ってると？
そんなに特異な条件ではないぞ たぶんお問い合わせフォームかその延長くらいしか手がけたことなくて想定できないのでは >>853
フォームを使わない派の人？
であればリロードしたときや進む・戻るを
押した時にフォームの値と画面がずれる件を
どう対処してるか聞きたいんだけど >>857
俺が言いたいのはそこなんだよね。
みなさん、そこまで考えたことありますか？ってこと
確かに少しぐらいフォームと見た目がずれていても
ブラウザのせいですとか言って逃げるのもありだし、
キャッシュを強制的に破棄してリセットするのもありだろう。
仕事は時間が有限に有るわけじゃないから手抜きするのも
ありなんだけど、それはそれとしてブラウザの挙動をちゃんと
理解して最善の方法も提案できないとダメだと思う。
それができないと小規模なコードしか書いたことがないように見えてしまうよ フォームを使わない「派」？
<form>は使ってるよ
ずれは案件による。大雑把に言うと
・単純なものはブラウザまかせ
・図形など複雑なのは初期化（クッキーが関係してくる場合もあるので）
いずれにしろ必要なときに正確に取得することには注意してる
当たり前だが >>859
図形とフォームが結びつかないんだけどどういうこと？
ドローツールみたいな物の話をしてる？ 加えて書くと、<form>を使うか、使わず部品だけ使って即座に反映させるかは時と場合による
ユーザ目線での使いやすさ、他の部分及び全体との統一性、仕様、引継ぎなら元の状態などなど
書いててばかばかしくなる >>861
ユーザー目線での使いやすさやそこに書いてある理由は
フォームを使わない理由にはならないよ。
例えば、日付入力のinput要素があったとして
最近のブラウザはHTML5のリッチなインターフェースを
出すようになったけど古いブラウザでテキスト入力になるから
ユーザー目線で使いやすように独自で作ろうとなったとする。
だけどこれはフォームを使わない理由にはならないのはわかるよね？
Bootstrap Datepickerとかを使ったことが有る人ならわかると思うけど
textタイプのinput要素がリッチな日付選択フォームに化けるんだよ
この発想の応用で「ユーザーが何かしらの値を入力するもの」は
全てフォームのinput要素で実現できる。
（もちろんinput要素を使いやすいインターフェースに化けさせるわけだけど）
たしかに使いやすさのためにフォームが適切じゃないのはあるだろうけど
ドローツールみたいな具体的な利用例を書いてくれてないので、説得力がないんだよ。 たしかに案件による。殆どの案件はフォームで良い
フォームが適切じゃない案件はほとんどない。
探せば有るだろうけどぱっと思いつかないぐらい。
という意味で案件による。 「案件による」っていうのは反論ではない。
何が食べたい？なんでもいい。これと同じぐらい意味がない答
だからそんなにムキにならなくていい。 いやそれはそうなんだけど、せっかくレスするなら
自分の意見を言ってくれと >>862
>説得力がないんだよ。
別にいいよ、そんなつもりないから
>>857にレスしただけだ
クライアントでもないお前さんにあれこれ言われる筋合いはないし、
うちのやり方なんてどうでもいいだろ？ 割り込み失礼。
>>849の１つの要素（オブジェクト）に、>>852の不必要なものって何でしょう？
タグ何か余分？ > うちのやり方なんてどうでもいいだろ？
あなたのやり方はどうですか？
という質問に対して、
うちのやり方なんてどうでもいいだろ
は、なんのために答えたんですか？レベルなんだけどｗ
正解が有る問題だと思ってるのかな？
正解がない問題は、あなた（だれか）のやり方を
聞くしか無いでしょうに。 >>871
客にどちらが良いと思う？という質問された時に
場合によるなんて言っていたら仕事無くすよ？
場合によるならば、○○の場合はこうで
××の場合はこうです。という答え方をしなきゃ
質問している方だって「場合による」っていうのは
分かって専門化の判断基準っていうのを聞いてるんだよ。 >>870
↑うざーーーーーーー
絡まないほうがいいよ つか、なんで新人に対しての顧客対応の
やり方みたいなのを説明しなきゃならんのだよｗ >>872
↑もっとうざーーーーーーー
自分が客だとでも いや「場合による」で答えたつもりになってるのは
恥ずかしいなぁって話だよ。 >>873
871が読めないらしい
もうスレ違いになってきてるしな >>877
そういう話なら、>>871にレスしている
>>872を読むべきでは？ jqueryスレッドがあったのでこちらに書かせてください。
fancybox3のサイトの記述通りにパーツを落とさないでリンクを貼るだけのやりかたで
fancyboxを動かしています。
この場合はオプションが追加可能な下記スクリプトで
<script type="text/javascript">
$("[data-fancybox]").fancybox({
オプション
});
全画面中の透明なし、背景色の指定、枠線追加等はできないでしょうか？
やはりcssとjsファイルを落として自分で書き換えないと無理でしょうか？
どなた教えてください。 分析解析などの分野でOK/キャンセルボタンがない場合がある。
resetもあるわけがない。（事前確認によるその類はあるが。）
よってformが不要なことはある。 OK/キャンセル/resetボタンがないから
formがいらないっていうのは短絡的だな
input要素を一塊にして扱うならば、
formにしておくことで、JavaScriptから
一括でデータを読み込んだりキャンセルできる 短絡的な発想ついでに言っておくと、
submitボタンがないからといって、
Ajaxを使わなければいけないってことにはならない。
formにしておけばsubmitメソッドが使えるからだ だろ、その分野を知らない>>881
そこはclickだろ submitがいらないっつーのに「submitが使えるからだ」て >>884
よく読め
OK/キャンセル「ボタンがない」場合だ
ボタンがないだけでsubmitしないとは書いていない それをいうならば
「書いていないからしない」
も思い込みなわけで JavaScript飛ばしてjquery勉強するやつなんなの？
業界未経験者採用してる会社って、新人にどういう順番で教えてる？ とりあえずの戦力と言うことで…
使い捨てじゃないの？
大事に育てたいならJavaScriptは必要だね。
あと、とっかかりとしてjQなのかもよ。
いずれは内部の事も知らないといけないけど、
まずは何でもいいからねーって。 >>865
例えば人員の表で、男のみや女のみの絞込み、ID順に並び替えなど、
よほど処理時間かからない限りOKボタンなど配置しない
よくあるケースで今までもたぶん目にしてると思うよ
気にして見てる人は少ないだろうけど
あと君に言うわけではないが「フォームが適切じゃない」と>>862さんが書いてるが誰もそんなこと書いてないかと
なくてもよくね？の類は見られるが >>895
それはぱっと思いついた話だけど、、一歩ずつ考えていこうか？
まず、表全体のデータがクライアントにあるとしよう
（サーバー側にあっても同じことなんだがとりあえず）
絞込などの条件は、場合によっては１つしか無いって場合も有るだろうけど、
どちらかと言えば１つしか無いのは例外で、絞込項目は複数あって
並び替え機能もあるとしよう。
そうすると変更した項目だけからでは、表データを作ることはできない。
なぜなら、性別での絞込 + 年齢での絞込 + ID順 といった情報が
すべて揃ってないと表示する一覧は組み立てられない
そうすると必然的に複数の条件は「人員の表を出すために必要な条件」と
してグループ化考えることができるわけよ。
ボタンがなくて即時反映したとしても概念的なグループが存在する。
そのグループをフォームとして考えればいいわけ。
---- ここまではフォームとして作るのが自然でしょ？っていう話。以下はJavaScript側のメリット ----
グループをフォームとして作っておけばこれはJavaScript的にも便利なことがあって、
フォームデータをシリアライズするライブラリを使ったり作ったりすると、
条件オブジェクトとして{gender: 'man', age: 20, order_by: 'id'} みたいな
ハッシュを生成するのが簡単になる。
こういうライブラリは汎用的なライブラリとして作れるのでテストもしやすい。
そして全体のデータを、これらの条件オブジェクトを使って、フィルタするようなものを作る。
DOM操作が不要でこれも汎用的なライブラリにできるだろうからテストしやすくなる
最後に表示すべき表データからDOMを生成して完成。 >>897
divはデザインのために使うものだから
input要素をまとめるのには適していない
例えばこんなのとかnameが一緒でも
別々のものとして扱ってくれるし
<form id="form1">
<input type="radio" name="a">
<input type="radio" name="a">
<input type="radio" name="a">
</form>
<form id="form2">
<input type="radio" name="a">
<input type="radio" name="a">
<input type="radio" name="a">
</form>
名前空間みたいなもんだよ。グローバルに置くよりも
form配下においておけばメンテナンス性もよくなる 名前空間は変数のバッティングを防ぐためで当てはまらない
メンテナンス性向上はあるがHTMLに関しては必要なければ余計な囲いはないほうがいい
<p>や<ul>にクラス付ければ済むのにわざわざ<div>つけることはない
便利なのはわかるが今回それでなくてはならない理由がないんだな
使うか否かは記事の内容や本人次第だろう
押し付けがましいにもほどがある 上とは全く別件です
フォーム(#fm)の中にリセットボタン(#rst)を設置
Windowを閉じる前に確認
$('#rst').click(function(){$('#fm').reset();});
$(window).on('beforeunload',function(){return '終わるよ';});
#rstでも終わるよダイアログがでてしまうのですがどこがいけないのでしょうか？ >>900
押し付けてないよ？
事実としてグループととして扱えるように
form要素で囲んでおくとのが良いってだけ
form要素で囲んでおくとメリットは有るが
デメリットはない >$(window).on('beforeunload',function(){return '終わるよ';});
$(window)
ここには普通、セレクターが入る
$('#fm')
とか 「js event bubbling」で検索！
DOM イベントのバブリング。
子要素から、親要素の方向へ、イベントが伝播されていく
event.stopPropagation
イベント伝播を止める >>900
> 必要なければ余計な囲いはないほうがいい
それ大事
引継ぎで何か意味あるのかと無駄な手間が減る jqplotで凡例の項目の一部をデフォルトfalseにしたいのですが
どのようにすればできるでしょうか?
例えば以下のサンプルサイト様の凡例「花子」を
初期起動時にはデフォルトでfalseにするイメージです
http://alphasis.info/2012/04/jquery-plugin-jqplot-line_charts-legend-numberrows/
よろしくお願いします Windowを閉じる前に確認、とは親Window＝ブラウザです
>>904
具体的にお願いできないでしょうか
$('#rst').click(function(e){e.stopPropagation()});
でも同じでした >>905
それは別に大した問題じゃないかな。
一連のフォーム要素があることに対するパラメータ群であれば
formで囲えるだけじゃなくて名前もつけられる。
例えばsearch_paramsとかcustomer_infoとかね
そうするとこれは検索条件の名前なんだ、顧客の名前なんだと
意図が明確になる >>908
もっと簡単な例で、質問してくれ
何を言っているのか、さっぱり分からない >>908
こうかな？
$('#rst').click(function(e){e.preventDefault(); e.stopPropagation(); $('#fm')[0].reset();}); >>911
完璧です！邪魔だったクエリまで消えてくれて
ありがとうございます 珍しくスレ伸びてると見たらdiv厨ならぬform厨が張り付いてたのか
こんだけ拘っておいて押し付けてないってどんな神経なんだ 押し付けてないよ？
どうするのが良いかの話をしているだけであって
悪い方を選ぶのは自由だから >>916
満足とかそういう問題じゃなくて
単にあるべき姿を言ってるだけ 今回はreset()は使わないですしformは不要なので使わずにやります。
みなさんどうもでした。 白々しいｗ
わざわざ>>751のふりして、悪いやり方をしますって
宣言するとか、やるだけ無駄だってわからんの？ｗ >>917
あるべきという言葉はそれ以外を否定しているわけで結局のところ押し付けの婉曲表現です
なぜならそのあるべきから外れることは「間違いである」と言っているのと等価ですので
better to beではなくshould beまたはmust be（場合によってはshall be)ならね >>920
http://ejje.weblio.jp/content/%E3%81%82%E3%82%8B%E3%81%B9%E3%81%8D%E5%A7%BF
あるべき姿の英語
主な英訳
ideal form; ideal state
私のあるべき姿
what I should be
英語の「must」「have to」「should」の基本的な使い分け方
https://eikaiwa.weblio.jp/column/phrases/natural_english/difference_must_should_have_to
「should」は助言や提案を表す
「should」は「～したほうがよい」というニュアンスの助動詞です。助言や提案をするときに使われるため、
「must」や「have to」に比べて強いニュアンスはありません。 >>921
should＝～した方がいい は日本の英語教育の害悪の一つ しなければならない ・・・ must
するべきである・・・ should
ある（する）べきなんだから、それ以外を否定しているわけじゃない >>925
日本語の勉強した方がいいんじゃないか？
「～するべき」と言われていることに反した行動をとった人がいたら普通眉をひそめるだろ？
それってどういうことか考えてみなよ >>919
いえ、本人です。
もちろん普通のお問い合わせフォームでは使ってますよ。 証拠？
つーかくだらん書き込みでクソスレ化が進んでるな >>926
日本語というより RFC2119 的な主張がされている気がしないでもない
歪曲表現を好む日本人には受け入れがたいだろうが… 基本的なことで質問です。
jsfiddleなどのサイトでなくテキストにして幾つかのブラウザ(ie9など)で。
画面の戻る進むや再読込すると、チェック状態と結果が違う場合があります。
チェック状態なのに四角だったり。
セレクトボックスやラジオでも同様なことが起こります。
どう対処してますか？ 例えば
#zi {
font-size: 12px;
text-align: center;
width: 20px;
height: 20px;
border-width: 2px;
border-style: solid;
}
.ccl {
border-radius: 50%;
}
<p><label><input type="checkbox" id="chk">○にする</label></p>
<p id="zi">あ</p>
$(function(){
$('#chk').click(function(){
if($(this).prop('checked')){
$('#zi').addClass('ccl');
}else{
$('#zi').removeClass('ccl');
}
});
}); 訂正です。
誤：幾つかのブラウザ(ie9など)で。
正：幾つかのブラウザ(ie9など)で試してもらえれば現象確認できると思います。 ちょっと見づらいからリファクタリングな
#zi {
font-size: 12px;
text-align: center;
width: 20px;
height: 20px;
border-width: 2px;
border-style: solid;
}
.ccl {
border-radius: 50%;
}
<p><label><input type="checkbox" id="chk">○にする</label></p>
<p id="zi">あ</p>
$(function(){
$('#chk').click(function(){
$('#zi').toggleClass('ccl', $(this).prop('checked'));
});
}); んで、この話はWeb製作板でこの間やったな。
input要素に状態を記録しろと。同じ話でいいならやるけど？ Web製作板で論破されて悔しいからこっちで仕切り直ししたいのかなーって思った。
結論としては
楽な方法としてinput要素に状態を保存してCSSで制御する
面倒な方法として、ページ表示時にフォームの値とページの同期をとる
この２つだったよ。 あ、ごめん。ここWeb制作板だったｗ
いや、この話はこれで終わりでいいよ。
結論は出てるし、誰もレスしなかっただろ？ ブラウザが状態を、キャッシュしているのかな？
そのキャッシュが整合性が取れていないのかも
キャッシュをクリアすれば？ FOX52でやってみたがそうなるな
キャッシュってphpのsession_cache_limiterみたいなキャッシュ制御？ 読み込み時は全ての:checkedを得て再設定するとか
遷移はどうなんだろ ブラウザの戻るボタンなんて、ブラウザ毎に、動作が異なるだろ。
各ブラウザのキャッシュ機能を予測するのは、無理だろ
ユーザーが、x ボタンを押してから、y ボタンを押した、という動作をした場合、
ブラウザによっては、x のJS を実行せずに、y のJS だけを実行するかも知れない
もし動作を省略された、x の状態に、y が依存していれば、不整合を起こす
こういう可能性が無限に考えられるから、
とにかく、キャッシュをすべてクリアして、初期化した状態から始めるべき
各ブラウザの動作などは、予測できない 何を予測するんだ？
キャッシュは残る or 残らない の
二通りしか無いだろｗ
そもそもキャッシュはユーザーにとって
快適になるからブラウザは搭載しているのであって
それを無効にするのは馬鹿げてる >キャッシュをすべてクリアして、初期化した状態から始めるべき
後者はHTMLの値またはjsの定数や変数から始められるが
前者は何を指しているのかわからん
まさか手動でクリアせよと？ ブラウザが、キャッシュを使って復元する際、
どのようにJS を実行するか、予測できない
ユーザーが、x ボタンを押してから、y ボタンを押した、という動作をした場合、
ブラウザによっては、x のJS を実行せずに、y のJS だけを実行するかも知れない
本来なら、f(x), f(y) と同じ関数を、この順番で2回実行しなければならないけど、
同じ関数の場合、最後のf(y)だけを、実行するかもしれない
ブラウザは、同じイベントハンドラーを、
呼ばれた回数だけ、正しい順番で、すべて記憶して復元しないだろ。
最後の引数しか、キャッシュしていないかも知れない
だから、この場合、省略されたf(x)の方に、重要な情報があった場合に、
不整合を起こすのではないか？
他にも、そもそも、JS を実行しないブラウザもあるかもしれない。
この場合は、最後の状態だけを持っていて、それを復元する
とにかく、各ブラウザの挙動は、予測できない > ユーザーが、x ボタンを押してから、y ボタンを押した、という動作をした場合、
> ブラウザによっては、x のJS を実行せずに、y のJS だけを実行するかも知れない
いきなりキャッシュとは関係ない話を始めたぞ。
どうするんだこいつ？ｗ まさか、キャッシュってJavaScirptの実行処理を
頭から再生することだと思ってるのか？
アホだｗ アホだろｗｗｗ 状態保存は（おそらく）順序には関係ないだろう
>>937に以下追加するといい
<a href="hoge.html">他のHTML</a>
<input type="text" value="">
テキストボックスに入力して、他のページに飛ぶ
その後ブラウザの戻るボタン
入力されたテキストは維持されているがaddClassのものは消えている
もちろん全てのOSやブラウザで試したわけではないし、
これが保証された挙動ではないと思うが CSSに影響するパラメータが単純かつ少数であれば
要素の属性をattrで変え、CSSでは[hoge=]や[hoge*=]などで可能
ただし、例えば色を変える場合は色数が増えるごとにCSSの条件も増え、
ユーザーから#696969などの値が入る場合は不可能
よってこの方法を使える場合は限られるだろう 訂正
ユーザーから#696969などの値が入る場合は
限られているだろう。 >>956
thx
ピンポイントなら可能だが事実上不可能
だった
頭ではわかってたが言葉足らずだった >>957
いや、全く分からんｗ
ユーザーから#696969などの値が入る場合は不可能だが
ユーザーから#696969などの値が入る場合なんて殆ど無い
これで正確になった
なおユーザーから#696969などの値が入る場合は、
動的に<style>タグを生成すれば良いだけの話 各ブラウザによって、戻るボタンを押した際、
JS まで実行して復元するかどうかなど、わからない
JS は実行しないかも知れないし、するかも知れない その場合の対応方法として、
余計なことすんなよと言いながら、キャッシュを無効にしてパフォーマンスを落とす方法と
パフォーマンスを上げるためにキャッシュしてるんだね。すごい。と
キャッシュされてもされなくてもどちらでも動くように作る方法 >>958
<input type="color">
”殆ど無い”ということは可能性あるということだな
例え正規表現使おうとも先ずはそれに備えなくてはならない
>動的に<style>タグを生成すれば良いだけの話
だから”属性の方法では”事実上不可能 遅くなりすみません、>>936です。
値や状態自体は
別にオブジェクトで、各要素やinput部にdataで、場合によりwebStrageで
などで保存は可能ですが戻る進むの度に全てセットし直すということでしょうか。
そもそもそのイベントはどう捉えればいいでしょうか？
プラグインやie9捨てればpushStateでできそうな気がしますが。 >>962を見ると実現したい内容に対して
進む方向性が間違ってるってのがよく分かるな。
間違っている方法だから進むに連れて複雑になる。 もったいぶる人って何が目的なんだろ
実は知らないんじゃ >>964 過去レス読めよって話だろ。これとか。読まないから回答が得られないんだぜ？
780 名前：Name_Not_Found[sage] 投稿日：2017/09/20(水) 23:24:03.41 ID:???
それを改善したのがこっち
https://jsbin.com/japiripaxo/1/edit?html,css,js,output
JavaScrpitのコードは特定の値をinput type="hidden"要素にコピーしているだけ
汎用的でコードも単純なのでバグの可能性は小さくなる
input type="hidden"にコピーしているのはキャッシュが有効に使われるようにするため
今回フォームを使うということで、検索フォームのようなものもあるかもしれない。
その場合ブラウザの標準の動きはリロードした時にフォームに前の値が残る。
値が残ったり残らなかったりするのはありえないので統一しなければいけない。
デフォルトの動きに統一する場合、input type="hidden"にコピーすることで
ブラウザの標準の動きにあわせることができる。
またブラウザの標準の動きをやめてリロード時に初期化したい場合は
form.reset()を呼び出せばいい。
また別のやり方として、input type="hidden"ではなく特定の要素、
大抵は親のブロックの何処かのclassなどに値を入れるやり方もある。
だけどこっちもフォームと混ぜた時に、リロードで値が残ったり
残らなかったりするので気をつけないといけない。
790 自分：Name_Not_Found[sage] 投稿日：2017/09/21(木) 22:57:49.28 ID:???
>>780のコード訂正
> それを改善したのがこっち
> https://jsbin.com/japiripaxo/1/edit?html,css,js,output
不要なコード（ $('input').trigger('change') ）が残ってた。
訂正版 https://jsbin.com/xibozenopo/edit?html,css,js >>955←の場合でもできる？この場合どうすんだろ 行数倍になるのか、あまりスマートではないな
一般的に行われてる方法なのかな？ >>966
フォームに値が残るから、
その場合は
JS実行結果がキャッシュされない → JSが実行されるので値を元に色をつける
JS実行結果がキャッシュされる → キャッシュされてるので色がついている
ということになるので快適さを損なうこと無く
ページ遷移でリセットされずに正しい動きをするよ >>968
できればもっとｋｗｓｋ
16x16x・・・色に対応できると？ 色に対応できるかどうかというより、フォームの値のキャッシュに
対応できると行ったほうが良い
本質的な問題（問題というか理解しなければいけない点）は
ブラウザはサクサク動くように戻るを押した時に
フォームの値やページ内容をキャッシュすることがあるということ
そしてそのキャッシュにどうすれば簡単に対応できるかということ
キャッシュに対応するというのはキャッシュを破棄するという意味じゃない。
せっかくのブラウザのキャッシュを破棄するとサクサク動かなくなる。
ここまではいいかい？ Rails, Angular, React などの、フレームワークのやり方に従った方がよい
たいていは、サイトの戻るボタンで機能するように作るけど、
ブラウザの戻るボタンでは機能しない
なぜかというと、ブラウザの戻るボタンの場合、
すでにページが解放されてしまっているから、
フレームワーク内で値をキャッシュできない
その場合は、WebStorage を使うのかも。
よくわからないけど <table>
<tbody>
<tr>
<td>
<a href="" >文字列１</a>
<br>
文字列２
</td>
...
の時に、文字列１と２をそれぞれ取り出すには、どんなセレクターを書けば良いでしょうか？ 文字列1は
$("table a").text()
2は
$("table td").html().split('<br>')[1]
こう？trimが必要になると思う >>936です。
>>965
せっかくですがie9で機能しないのです。
それとなるべくならHTMLにそこまでの大きな変更をしたくないです。
でもありがとうございます。
>>971
やはり戻るは捨てですかね。
現状、多さと速さ及び一部cookieに使えるので変数管理してます。
なので、保存は容易いです。
WebStorageは別件で使用してますが、cookieより容量多く記述や扱いも簡単で重宝してます。
ie8以上その他古いブラウザも対応してますし。
1行目調べてみます。ヒントありがとうございます。 >>974
各フレームワークのやり方を調べて、やり方がわかったら、ここで発表して
Rails, Angular, React, Backborn,
jQuery Mobile, Monaca(Cordova) スレチでしたら誘導お願いします
https://www.wan55.co.jp/column/detail/id=447
絞り込み検索をするのに上のページがほぼやりたかったことに近く、使わせてもらったのですが
チェックボックスでの絞り込み条件をORではなくANDにしたいです
上のDEMOでいうと「哺乳類」「だれなん？」をクリックすると「おじさん」１件のみが表示されるようにしたいのです
よろしければ教えていただけないでしょうか >>963
間違ってはないだろうよ
http://ponk.jp/jquery/basic/state_save
ブラウザバック、キャッシュなどでググれば似たようなものはいくつも出てくる
で、>>965の#000000対応版はまだかね？ 誰か>>979を訳してほしい
ちなみに
>JSが実行されるので値を元に色をつける
だとjsを使う分部とそうでない部分が出ると読めるが統一性が中途半端になりそう
違ったらゴメン >>977
元のコードも、悪くはいんだけどまだまだコードが洗練されてないね。
とりあえず元のコードの半分まで減らした。ES6機能は意図的に使ってない。
https://jsfiddle.net/3cnkcyjk/10/
絞り込み条件の部分は、リストの項目ごとに「tag」の値が複数入っている。
またチェックボックスもチェクされた値が複数ある。
要するにORというのは、tag配列とチェックボックス配列、
配列と配列のどれかが一致したということで、これは
配列の積集合（共通の値）の結果の配列が1個以上あるということ
AND条件というのは、tag配列とチェックボックス配列の
積集合の結果の配列が、チェックボックスの配列と同じであること
（ただし順不同で重複する値がないこと）
他にもやり方は有るが、ORに比べて少しややこしくなるので
チェックボックスの数だけ_.everyで回して値が
全てtag配列に含まれてることを確認するのがわかりやすそうだね。
コードで書くとこうだね
_.every(values, function(value) { return _.includes(item.tag, value) }) CSS の黒色
black, #000000, #000 >>978と>>980はカラーコードとわかっている
>>979は知らなかったのか知っててあえてそう書いたのか、それが>>980 >>981
わざわざ書き直しまでありがとうございます！
最初動かなくて焦ったのですがunderscoreではなくlodashを使用するのですね
残念ながら初心者のためせっかく教えていただいたコードをどこに差し替えるかも分からないレベルですが
作りたいものは個人的な趣味の範囲なので焦らずじっくり学ばせていただきます
本当にありがとうございました >>986
> 最初動かなくて焦ったのですがunderscoreではなくlodashを使用するのですね
underscoreと互換性がある機能だけを使ったつもりだったんだが残念。
_() は使えず、_.chain() と書かないといけないのと
_.containsで文字列が使えないんだな。
lodashの方がおすすめだが、underscore版を作っておいた。
https://jsfiddle.net/3cnkcyjk/12/
あとさほど大きくは変わらんのだが、ES6対応とl
odash専用になるがテンプレートを書き換えた。
https://jsfiddle.net/3cnkcyjk/14/ >>987
遅くなりましたが本当にありがとうございます
お金払うレベルかと思うほど親身にして下さって感謝しています
お陰様でなんとかAND検索に差し替えることもできました
助かりました、本当にありがとうございました 親身っていうかあれやな。
元のコードが挫折するほど汚かったらやる気なくなったがそこまでじゃないし、
汚くはないけど、なんかやり方間違ってるなー感があったので
どこまで減らせるかネタとして面白かったからやっただけやな。
運が良かっただけだ。 >>991
981=987さんでしょうか
スレが埋まるのに甘えてもう一つだけお尋ねします
https://jsfiddle.net/3cnkcyjk/10/
このjsの最後の「テキストボックス絞り込み関数」で、名前または説明文の中に検索単語が含まれている場合に一覧を絞り込むようになっていますが
説明文（description）をタグのように[ ]でくくって複数記述していた場合、説明文からの結果が一致しないとみなされて0になってしまいます
「description」を「tag」に置き換えた場合に、テキストボックスに「類」と打つと哺乳類・鳥類・魚類・昆虫類の結果が出るようにしたいといえば伝わるでしょうか
「_.includes」を自分なりにeachをつけてみたりintersectionに変更してみたりしましたが勉強不足でうまくいきません
部分一致で結果を引っ張るためにはどうしたら良いでしょうか >>992
まず最初に、wordsの名前が良くなかった。keywordsという名前に変更する
https://jsfiddle.net/3cnkcyjk/15/
最後の行、コードが重複してるなーって思っていたわけよ
（同様に word も keyword に変更している）
_.includes(item.title, keyword) || _.includes(item.description, keyword);
この部分。_.includesが二回でてる。keywordが二回出てる。気に食わない。
が、二回程度なら諦めるか。でこういうコードにした。
そこに今回さらにdescriptionが配列になる（descriptions)わけでもっと複雑になるわけだ
じゃあここで発想を変えよう。
最終的には、titleかdescriptions[0]かdescriptions[1]かdescriptions[N]のどれかに
入っていればOKということになるわけだ。
ってことはだ。
words = [item.title, item.descriptions[0], item.descriptions[1],...,item.descriptions[N]]
という配列を作っておき、この配列の文字列の何処かに含まれていればOKってことになるわけだよ。
あとは、wordsの配列の中のword文字列の中にkeywordが含まれているか？
ということで、
_.includes(item.title, keyword) || _.includes(item.description, keyword);
と等価なのは
var words = [item.title, item.description];
return _.some(words, function(word) { return _.includes(word, keyword) });
ということになる。
https://jsfiddle.net/3cnkcyjk/16/ ただよ？ これでも動くけど
これってkeywords（入力されたキーワードをスペース区切りって作った）配列と
[title, descriptiuon] 配列の全部の組み合わせを・・・
ここで気づいた。lodashにproduct関数ねぇのかよ！
例えば、["title", "description"] に ["a", "i"]のいずれかが含まれているか？っていうのは
２つの配列の全組み合わせ
"title" include? "a"
"title" include? "i"
"description" include? "a"
"description" include? "i"
となるわけだよ。これをproductとかいう関数に食わせれば話は早いんだが、ないなら仕方ない。
とりあえず今回は、順番を変えるだけで済ませよう。
return _.some(keywords, function(keyword) {
return _.some(words, function(word) {
return _.includes(word, keyword)
});
});
これでkeywordsとwordsの総当りに対して、includesを実行することになるわけだ。
https://jsfiddle.net/3cnkcyjk/17/ あとは、wordsの部分だけだな
var words = [item.title].concat(item.description);
これだけでOK
ついでにkeywordsに分割する部分の正規表現が無駄だったので修正
https://jsfiddle.net/3cnkcyjk/19/
ついでにこの_.escapeはいらないと思うので削除
https://jsfiddle.net/3cnkcyjk/20/
あとやっぱりproduct使わないと見づらいので
https://www.npmjs.com/package/lodash.product つかった
https://jsfiddle.net/3cnkcyjk/21/
そしてfilterByKeyword関数だけES6にしてみた
https://jsfiddle.net/3cnkcyjk/22/ 本当にありがとうございます
月並みな感謝の気持ちしか書けず申し訳ないです
全てを理解できるレベルには達していませんが一つ一つページ確認させてもらいました
参考にしてようやくやりたかった内容が完成しました
キーワード検索もバッチリで気持ちがいいです
（他板のスレに投稿したところスレ住民も便利だと喜んでくれました）
大変お世話になりました、ありがとうございました ∧,,,∧
( ・∀・) 1000ならジュースでも飲むか
( )
し─J このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 363日 17時間 52分 5秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
