jQuery 質問スレッド vol.7 [無断転載禁止]©2ch.net
: Name_Not_Found [sage] 2016/11/02(水) 11:51:34.33ID:??? JavaScriptでDOM用ライブラリであるjQueryのスレです。 このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。 jQueryを使って作る側のスレであって、こんなプラグインありませんか?と聞くスレではありません。 そういうのは自分で探してください。 ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。 JavaScriptの質問は関連スレで質問して下さい。 ■前スレ + JavaScript & jQuery 質問用スレッド vol.6 + ttp://echo.2ch.net/test/read.cgi/hp/1465566635/ ■関連スレ + JavaScript の質問用スレッド vol.122 + ttp://echo.2ch.net/test/read.cgi/tech/1472426483/ + JavaScript(ECMAScript)質問用スレッド vol.122 + ttp://echo.2ch.net/test/read.cgi/tech/1472401404/ + JavaScript の質問用スレッド vol.131 + ttp://echo.2ch.net/test/read.cgi/hp/1478053599/ JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net ttp://echo.2ch.net/test/read.cgi/hp/1465399470/ + JavaScript & jQuery 質問用スレッド vol.6 + ttp://echo.2ch.net/test/read.cgi/hp/1465566635/ : Name_Not_Found [sage] 2016/11/02(水) 11:52:09.44ID:??? ■参考URL ダウンロード、CDN ttp://jquery.com/download/ ブラウザサポート ttp://jquery.com/browser-support/ jQuery UI ttp://jqueryui.com/ jQuery UI ダウンロ−ド ttp://jqueryui.com/download/ リファレンス等 ttp://alphasis.info/ ttp://www.jquerystudy.info/ ttp://js.studio-kingdom.com/ 【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita ttp://qiita.com/fmy/items/345a264a1cf2e2a73f62 : Name_Not_Found [sage] 2016/11/02(水) 11:53:34.98ID:??? > JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net これだけ「無断転載」を削除し忘れた : Name_Not_Found [sage] 2016/11/02(水) 12:27:54.91ID:??? 乙 手元の専ブラだとスレタブにjQueryとだけ書いてあって大変わかりやすい : Name_Not_Found [sage] 2016/11/02(水) 12:56:50.43ID:??? 乙、JavaScriptスレも前後の + を削除していいんじゃないかと思った 昔からの伝統なのかずっと入ってるけど、タブを見るときに邪魔なのよね : Name_Not_Found [sage] 2016/11/02(水) 12:58:32.71ID:??? + でフィルタリングしているので、無いと不便だな : Name_Not_Found [sage] 2016/11/02(水) 13:08:44.04ID:??? それはフィルタ条件を変えれば済む問題では : Name_Not_Found [sage] 2016/11/02(水) 13:33:22.04ID:??? 見た目のセンスの悪さは置いとくとしても、プログラム関係なんだからしょーもない無駄は省いて欲しい : Name_Not_Found [sage] 2016/11/02(水) 14:18:49.65ID:??? JavaScript(ECMAScript)スレも名前が紛らわしいよな 普通にECMAScriptスレでいいのに : Name_Not_Found [sage] 2016/11/02(水) 16:43:42.48ID:??? あら、JavaScriptスレも立てられたのね 乙 : Name_Not_Found [sage] 2016/11/02(水) 17:49:24.74ID:??? 関連スレで "[無断転載禁止]©2ch.net" を削除すると見やすいな スレ立て時にはタイトル編集が面倒だけど、是非続いてほしい : Name_Not_Found [sage] 2016/11/08(火) 23:44:57.12ID:??? imgurとかの画像をimgのsrcに入れる前にファイルサイズを取得する方法はありますk : Name_Not_Found [sage] 2016/11/08(火) 23:50:46.12ID:??? 言ってる意味が分からんが「jquery ファイルサイズ 取得」当たりでぐぐれば回答っぽいのが出てくると思うぞ : Name_Not_Found [] 2016/11/24(木) 18:12:07.56:6i1Aonys 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> : Name_Not_Found [sage] 2016/11/24(木) 18:38:01.71ID:??? 方法はいろいろあるよ。好きな方法をお試しあれ。 [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> : Name_Not_Found [sage] 2016/11/24(木) 18:43:37.60ID:??? あ、もちろん、動的に関数をclickイベントに登録したなら関数内にreturn false;だけでもおkだよ (のコードはちゃんと動的にclickイベントに登録できてない。) <script> function click_a(e){ return false; } $(function(){ $("a.test").on("click", click_a); }); </script> <a class="test" href="./">リンク</a> : Name_Not_Found [sage] 2016/11/24(木) 18:44:35.75ID:??? ありがとうございます! めっちゃ早くて助かりますw : Name_Not_Found [sage] 2016/11/24(木) 18:50:53.17ID:??? return false はバブリングも停止してしまう デフォルトアクション抑止が目的ならevent.preventDefault() を推奨する : Name_Not_Found [sage] 2016/11/24(木) 18:52:25.29ID:??? IEじゃ、event.preventDefault() は効かないから return false の方が無難 : Name_Not_Found [sage] 2016/11/24(木) 20:05:28.13ID:??? 非対応ブラウザ向けにjQueryが補完してくれるはずだが… とはいえ、IE8-をサポートする必要性はかなり低くなっている : Name_Not_Found [] 2016/11/24(木) 22:12:00.66:bHNUyNSt jQuery 1.x系は新機能追加はされず、今後はbug fixのみ IE8はMSのサポートが切れており、セキュリティ上危険なブラウザ 積極的にサポートする理由はもうないよ : Name_Not_Found [sage] 2016/11/24(木) 23:15:37.23ID:??? クライアントの鶴の一声という理由がね・・・あるんだ・・・ 金額が倍になってもやれっていうんだ・・・どういうことだ・・・ : Name_Not_Found [sage] 2016/11/24(木) 23:45:17.64ID:??? 図書館の館内検索みたいな閉ざされたシステムだと平気でIE6とか使ってるからな : Name_Not_Found [sage] 2016/11/24(木) 23:47:38.36ID:??? しかもIE6専用、それ以外のブラウザは一切使えないとかね 今もあるのかなぁ。あるんだろうなぁ : Name_Not_Found [sage] 2016/11/25(金) 03:36:09.99ID:??? 少なくともJavaScriptの範囲内においては jQueryを使っておけばIE6でも動くようにすることはできる。 : Name_Not_Found [] 2016/11/25(金) 14:21:29.74:qja24Qlb IE6対応なら jQuery 1.12で更新が停止しているな クライアント希望なら仕方ないが、それでも jQuery 1.12 上で event.preventDefault() を使えばいいだろう (DOM APIで書くとしたら event.preventDefault と event.returnValue を使い分けるが) : Name_Not_Found [sage] 2016/11/25(金) 21:38:17.96ID:??? jQuery 1.12で更新が停止っていうけど、 その更新は今年の5月でそんなに前じゃないけどな。 ttps://blog.jquery.com/2016/05/20/jquery-1-12-4-and-2-2-4-released/ : Name_Not_Found [sage] 2016/11/25(金) 21:39:24.79ID:??? > (DOM APIで書くとしたら event.preventDefault と event.returnValue を使い分けるが) そういった本質的じゃないコードは書くべきじゃないね。 IE6を将来捨てるためにjQueryを使うべき : Name_Not_Found [sage] 2016/11/25(金) 22:14:19.19ID:??? IE6を切り捨てるのは event.preventDefault 一本化で終わりなんだが、何を言ってるんだ、この人は? : Name_Not_Found [sage] 2016/11/25(金) 23:13:03.33ID:??? 将来的には捨てるけど、いますぐ捨てられないって話をしている。 捨てるときにコードを書き換えるとかありえない。 : Name_Not_Found [sage] 2016/11/25(金) 23:16:07.92ID:??? >捨てるときにコードを書き換えるとかありえない。 これやりたいよね・・・ 不要なコードは一旦全部消してリファインしたい : Name_Not_Found [sage] 2016/11/25(金) 23:42:21.21ID:??? DBの特定データをphpで出力し、 jQueryで動きを付ける場合、 jQuery記述の変数部分にphpの記述が混在するカタチになりますが こういうのは良くないですよね? 無理にでも分離すべきでしょうか : Name_Not_Found [sage] 2016/11/26(土) 00:37:17.75ID:??? 俺が言ってるのはブラウザを切り捨てる時の話ね。 ブラウザを切り捨てて、特定のブラウザ専用のコードは 不要なコードになるって話なら、jQueryを使っていれば そういうコードはライブラリに含まれるので、 最初から不要なコードが入らない。 : Name_Not_Found [sage] 2016/11/26(土) 00:41:54.73ID:??? jQuery(JavaScript)とPHPのコードは混ざってはいけません。 そもそもJavaScriptのコードは外部ファイルにするものです。 つまりJavaScriptの中にPHPコードを入れることは出来ません。 タグに値を埋め込むか <input value= : Name_Not_Found [sage] 2016/11/26(土) 00:42:08.90ID:??? はい分離すべきです。 jQuery(JavaScript)とPHPのコードは混ざってはいけません。 そもそもJavaScriptのコードは外部ファイルにするものです。 つまりJavaScriptの中にPHPコードを入れることは出来ません。 タグに値を埋め込むか <input value="PHPのコード"> <span data-value="PHPのコード"> 変数定義だけのscriptタグ(※変数定義であってコードではないからOK) <script>var data = "PHPのオブジェクトをJSON出力したもの"</script> 許されるのはこれだけです。 : Name_Not_Found [] 2016/11/26(土) 02:05:07.07:YwXvYq3b そして、jQueryを捨てられなくなるわけだな 依存先が変わっただけで問題は何も解決してない : Name_Not_Found [sage] 2016/11/26(土) 02:42:37.78ID:??? なにを使おうが、それに依存することに変わりはないので、jQueryだけの問題じゃない。 依存することからは避けられないので、一番楽なもの依存するのが良い。 JavaScriptのフレームワークはどれも将来性が危うい。 DOM APIが変わらなければjQuery APIも使えなくなることはない。 長く使えて安定していた。そしてこれからも安定しているjQueryが一番いい選択肢だよ。 : Name_Not_Found [sage] 2016/11/26(土) 09:24:44.87ID:??? お前の依存の方が問題 : Name_Not_Found [sage] 2016/11/26(土) 12:06:30.90ID:??? Strutsで構築されるデータベースサイトを10万で請け負った。 もうちょっと取れたかな…。 : Name_Not_Found [sage] 2016/11/26(土) 12:08:58.60ID:??? 誤爆しました。失礼しました : Name_Not_Found [sage] 2016/11/26(土) 12:11:27.86ID:??? 安すぎワロタwww その10倍はいけるだろ。 : Name_Not_Found [sage] 2016/11/26(土) 13:26:31.07ID:??? なるほど。有難うございます : Name_Not_Found [] 2016/11/26(土) 13:45:31.32:nhgZ9kOy DOM APIは実装が追いついてきているので将来的にはライブラリを使わずとも互換性を確保できる ライブラリは用途に応じて使い分けるものでjQueryに依存だけに依存させる理由はない 君のやり方だとjQuery以外のライブラリは一つも使用しない事になるからな(jQuery以外は将来性が危うい) はブラウザ分岐コードが無くなる代わりにライブラリ依存する、ごく普通のトレードオフ : Name_Not_Found [sage] 2016/11/26(土) 13:55:08.91ID:??? jQueryは互換性を担保するためのライブラリじゃなくて DOM APIよりも短い記述で目的を達成するためのライブラリだよ。 その前提が間違っている。もっと勉強してきなさい。 : Name_Not_Found [sage] 2016/11/26(土) 13:56:19.42ID:??? > 君のやり方だとjQuery以外のライブラリは一つも使用しない事になるからな(jQuery以外は将来性が危うい) jQueryはDOM操作ライブラリなのだから、DOM操作以外は 別のライブラリを使うだけの話だろ。 お前じゃね? jQuery以外のライブラリを使えないと思いこんでるのは。 : Name_Not_Found [] 2016/11/26(土) 14:15:07.84:nhgZ9kOy 俺はjQuery以外のライブラリも使う だが、はjQuery以外の将来性が危ういと思いこんでいるようだから彼からすれば他のライブラリを使えないだろう? : Name_Not_Found [sage] 2016/11/26(土) 14:23:36.62ID:??? 発火ワード:jQueryマンセー これ常識 : Name_Not_Found [sage] 2016/11/26(土) 14:46:13.86ID:??? JavaScriptのフレームワークは、って書いてあるのに JavaScriptのライブラリすべてって、思い込んでる所が だめだよなぁw : Name_Not_Found [sage] 2016/11/26(土) 14:48:16.55ID:??? 数少ないjQueryの話題ができるスレなんだから 仲良くやってくれ : Name_Not_Found [sage] 2016/11/26(土) 15:21:50.71ID:??? 2chのバグだろう 書き込み確認画面が出る際、" を使うと、そこで文字列の終了とみなされる。 " の代わりに、\" とエスケープすれば、どうだろう? それか、書き込み確認画面が出たら、1度キャンセルすれば、確認画面は出ないようになった : Name_Not_Found [] 2016/12/05(月) 19:06:51.87:AxQQ57Pz ttp://weboook.blog22.fc2.com/blog-entry-406.html この記事を参考にさせてもらい、縦長ページの上部固定ヘッダーにメニュー(主にページ内リンク)を作ったのですが、メニューボタンを開閉する度にページの最上部に移動してしまい、メニューの役割を果たせません メニューボタンを開閉してもスクロール位置が変わらないようにするにはどういう記述を加えたら良いですか? : Name_Not_Found [sage] 2016/12/05(月) 19:23:48.32ID:??? href="#" を外す : Name_Not_Found [] 2016/12/05(月) 19:42:29.42:AxQQ57Pz おお、解決しました!ありがとうございます! まさかこんな単純なことだったとは… : Name_Not_Found [sage] 2016/12/05(月) 21:24:26.23ID:??? href="#" とかいう手抜きはいい加減消えてほしいと思う。 サンプルプログラムはともかく、実際にはつかわないように。 間違った書き方だからこれ : Name_Not_Found [sage] 2016/12/05(月) 21:27:42.78ID:??? そういう時は正しい書き方も書こうよ href="#top" : Name_Not_Found [sage] 2016/12/05(月) 21:41:04.90ID:??? そうとは限らないならなぁ。 実際には何もしないの意味で使っている人も多い。 何もしないつもりで書いたら一番上にいっちゃって、それを防ぐために <a href="#" onclick="return false"> とか書くやつまでいる。 アホすぎ。 : Name_Not_Found [sage] 2016/12/05(月) 21:43:57.89ID:??? そもそも<a>で作っているのがおかしい <button>だろう : Name_Not_Found [sage] 2016/12/05(月) 22:17:03.93ID:??? jQueryという言葉をしって5年 いまだによくわからない いつしか調べる時がくるのだろうか その日までアディオス : Name_Not_Found [] 2016/12/05(月) 22:52:46.46:RcnrqIcn <a href="#"> は IE6- で :hover がa要素にしか適用出来なかった時代の名残 今では問題ないのでa要素にする必要はない <input type="button"> <button> <span role="checkbox" aria-checked="false"> 辺りが妥当か 特にWAI-ARIAは勉強するとわかりやすいマークアップになるのでお勧め : Name_Not_Found [sage] 2016/12/05(月) 23:18:09.41ID:??? そういや古いIEではa要素しかhover効かなかったんだな… 懐かしい通り越してすっかり忘れてた : Name_Not_Found [sage] 2016/12/06(火) 02:07:35.79ID:??? ありがとうございます! 勉強になります : Name_Not_Found [] 2016/12/06(火) 10:57:25.16:7JHlfGqF 5年やって解らないのなら勉強方法がわ悪いと思う jQuery以前にJavaScript(特にECMAScript, DOM)を習得する必要がある : Name_Not_Found [sage] 2016/12/06(火) 11:51:16.72ID:??? jQueryと平行してECMAScript・DOMを勉強する方が効率はいいよ : Name_Not_Found [sage] 2016/12/06(火) 12:47:03.50ID:??? すみません、教えていただけないでしょうか。 jspにてid=tasktableである表(全10行)を作成し、 それぞれの<tr>に1〜10までのidを振っています。 ボタンを押すと、idが6以上となっている行を非表示とする ボタンを作成したいのですが、ボタンのスクリプトに $( : Name_Not_Found [sage] 2016/12/06(火) 12:47:42.06ID:??? すみません、途中送信されました。 ボタンを作成したいのですが、ボタンのスクリプトに $("#tasktable [id >= 6]").hide(); と組み込んでも非表示化されません。 idの指定に、大小比較を組み入れることはできるのでしょうか。 : Name_Not_Found [sage] 2016/12/06(火) 13:16:54.27ID:??? idは非表示の為だけに振ってるの? もしもそうならidは振らないでこれでいけるよ $('#tasktable tr').slice(5).hide(); : Name_Not_Found [sage] 2016/12/06(火) 13:18:29.54ID:??? 変わったことをやる時は検索したほうが早い ttps://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(); } }) : Name_Not_Found [sage] 2016/12/06(火) 13:21:13.55ID:??? 何れにしても判定しないと駄目 $('#tasktable tr[id]').each(function() { $(this).attr('id') >= 6 ? $(this).hide() : void 0; }); : Name_Not_Found [sage] 2016/12/06(火) 13:28:50.23ID:??? $(this).attr('id') >= 6 && $(this).hide(); この方がスリム : Name_Not_Found [sage] 2016/12/06(火) 13:30:40.72ID:??? わざわざそんなトリッキーなことしなくてもifでええやん : Name_Not_Found [sage] 2016/12/06(火) 13:41:55.63ID:??? 色々なコードみたいからトリッキーなコードも書いてくれると嬉しい。勉強になる でも最初に回答はしないであげてほしいw : Name_Not_Found [sage] 2016/12/06(火) 13:50:43.02ID:??? HTML5 では数字から始まるidも許容されるが、論理的な名前を付ける方が好ましいと思う ttps://jsfiddle.net/x7m5t4vr/ : 72 [] 2016/12/06(火) 14:00:48.23:Y8QRsJ2y >72はid属性版コードがミスっていたので修正 [id=1] ttps://jsfiddle.net/x7m5t4vr/1/ [id="line-1"] ttps://jsfiddle.net/x7m5t4vr/2/ : Name_Not_Found [sage] 2016/12/06(火) 14:02:38.25ID:??? ま、で解決だろうけど : Name_Not_Found [sage] 2016/12/06(火) 14:12:46.21ID:??? HTMLにも手を入れるなら show(), hide() で管理せず、class, aria-hidden あたりで管理するのが望ましいとは思う ttps://hyper-text.org/archives/2015/07/jquery_3_0_alpha_versions_released.shtml : Name_Not_Found [sage] 2016/12/06(火) 15:32:31.07ID:??? .prop("hidden", true); じゃいかんのか? : Name_Not_Found [sage] 2016/12/06(火) 15:44:31.70ID:??? hiddenプロパティは何の要素ノードにある? : Name_Not_Found [sage] 2016/12/06(火) 16:00:13.95ID:??? すみません、昨晩のメニューボタン開閉の者ですがまた行き詰まってしまいました。 例のメニューは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) { } を加えたら良い気がしたのですが、いくつか推測で試しても上手く動作せず、どう組み込めば良いのか分からないので教えてください。 : Name_Not_Found [sage] 2016/12/06(火) 16:03:52.82ID:??? $('#tasktable tr[id]').each(function() { $(this).prop('hidden', this.id >= 6); }); : Name_Not_Found [sage] 2016/12/06(火) 16:07:14.95ID:??? cssで701px以上はdisplayhiddenとした方がいい。非表示のボタンが動作するのはほったらかしで良い それだと効果のないボタンが残ることにならないか : Name_Not_Found [sage] 2016/12/06(火) 16:07:27.14ID:??? display noneだった : Name_Not_Found [sage] 2016/12/06(火) 16:28:40.28ID:??? ,79 HTMLTableRowElement に生えてるのか、知らなかった しかし、HTML Living Standard にもないところを見るに非標準プロパティのようだ ttps://html.spec.whatwg.org/multipage/tables.html#the-tr-element : Name_Not_Found [sage] 2016/12/06(火) 16:31:50.61ID:??? 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); // 連続処理になるので適当な時間を設ける }); : Name_Not_Found [sage] 2016/12/06(火) 16:35:14.70ID:??? function addEvent(){ $('#menu a').off('click') // 重複するのでeventをoff if ($(window).width() <= 700) { $('#menu a').on('click', function() { ... ごめん間違ってたので一部訂正w : Name_Not_Found [sage] 2016/12/06(火) 16:39:25.35ID:??? 既存メニューの非表示は element.style.display === 'none' な要素ノードを探して hide() しかし、classを付け外しする方が Selectors API で探せるし、現実的だと思うんだがな… 勿論、aria-hiddenやaria-checkedでもいい : Name_Not_Found [sage] 2016/12/06(火) 16:58:41.57ID:??? ,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; }); }); : Name_Not_Found [sage] 2016/12/06(火) 17:01:28.80ID:??? あと、の内容が分かりやすくなるように画像を作ってみました。 ttp://imgur.com/K9Yn4yy.jpg : Name_Not_Found [sage] 2016/12/06(火) 17:02:28.94ID:??? hiddenはグローバル属性だよ。idとかstyleと同じ ttps://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute : Name_Not_Found [sage] 2016/12/06(火) 17:17:39.67ID:??? 画像はいいからHTML/CSS/JSまとめて ttps://jsfiddle.net/ にUPした方がいい : Name_Not_Found [sage] 2016/12/06(火) 18:00:15.95ID:??? そのイベントも$('#menu a').off('click')で削除されているので #toggle. click()を関数にしてaddToggleのみ削除するようにする function addToggle() { return $('#toggle').click(); } $('#menu a').off('click', addToggle); // addToggleのみ一旦削除 $('#menu a').on('click', addToggle) ; // 真の時のみaddToggleを追加 : Name_Not_Found [sage] 2016/12/06(火) 18:21:21.30ID:??? ttp://https://jsfiddle.net/qo688u62/ "> ttps://jsfiddle.net/qo688u62/ 初めて使ったので上手くできてるか分かりませんが…。78にあたる部分は記述してない状態です。 : Name_Not_Found [sage] 2016/12/06(火) 21:51:59.99ID:??? 俺ならこうする ttps://jsfiddle.net/qo688u62/1/ : Name_Not_Found [sage] 2016/12/06(火) 22:58:52.86ID:??? はいよ ttps://jsfiddle.net/h0jw8ogm/ : Name_Not_Found [sage] 2016/12/06(火) 23:21:34.58ID:??? 2chのバグだろう 書き込み確認画面が出る際、" を使うと、そこで文字列の終了とみなされる。 " の代わりに、\" とエスケープすれば、どうだろう? それか、書き込み確認画面が出たら、1度キャンセルすれば、確認画面は出ないようになった : Name_Not_Found [sage] 2016/12/06(火) 23:51:50.66ID:??? なかなかいいね。いつも通り指摘してやろうと思ったけど、 細かい指摘点しか思い浮かばなかった。 : Name_Not_Found [sage] 2016/12/07(水) 13:46:58.59ID:??? 誰も口だけ番長のアドバイスに耳を貸さないから黙っているといいよ : Name_Not_Found [sage] 2016/12/07(水) 15:26:41.53ID:??? ありがとうございます!無事解決しました! 他の方々もありがとうございました! : Name_Not_Found [sage] 2016/12/15(木) 08:17:40.47ID:??? すみません、おしえていただけないでしょうか。 ajaxで以下の通りコーディングしようとしているのですが、 ****のところに、他の関数で取得した値を入れたいと考えいます。 ****に直接その関数を記述することはできるのでしょうか。 $.ajax({ url: : Name_Not_Found [sage] 2016/12/15(木) 08:17:58.89ID:??? すみません、きれてしまいました すみません、おしえていただけないでしょうか。 ajaxで以下の通りコーディングしようとしているのですが、 ****のところに、他の関数で取得した値を入れたいと考えいます。 ****に直接その関数を記述することはできるのでしょうか。 $.ajax({ url: "Servlet", type: "POST", dataType: "text", data: {content: ****}, success: function(data) { : Name_Not_Found [sage] 2016/12/15(木) 09:07:47.06ID:??? Objectdから普通にできるよ data: {content: (function() {})()}, : Name_Not_Found [sage] 2016/12/15(木) 10:13:13.88ID:??? さっそくありがとうございます! やってみます! : Name_Not_Found [sage] 2016/12/15(木) 12:42:08.25ID:??? 申し訳ありません、質問のコードに誤りがありました。 正しくは、data: ****,でした。 試しに文字列を返す関数を設定して以下のようにやってみたのですが、 dataに'hoge'が設定されません。 どこか記述に誤りがあるのでしょうか。 $.ajax({ url: "Servlet", type: "POST", dataType: "text", data: $(function() {return 'hoge' ;}), success: function(data) { : Name_Not_Found [sage] 2016/12/15(木) 12:45:38.92ID:??? data: (function() {return 'hoge' ;})(), : Name_Not_Found [sage] 2016/12/15(木) 12:51:12.65ID:??? data: { hoge: (function() { return 'hoge' ; })() }, 下記と同じ function hoge() { return 'hoge' ; } data: { hoge: hoge() }, : Name_Not_Found [sage] 2016/12/15(木) 13:37:27.81ID:??? ajaxの根本的なとこわかってる? ttp://raining.bear-life.com/jquery/ajax%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6post%E9%80%81%E4%BF%A1%E3%81%A7%E3%83%87%E3%83%BC%E3%82%BF%E5%8F%96%E5%BE%97 >dataに'hoge'が設定されません。 これは Servlet が出力した値が入る。Servletってページもあるの? : Name_Not_Found [sage] 2016/12/15(木) 23:24:12.32ID:??? ありがとうございました。できました。 dataにはservletに送信するデータが入るという認識でした。 実際にservletをデバッグで止めたら値が引き継がれていました。 success:内のdataはservletから出力される値が設定されると 思っておりましたが、誤っていますでしょうか。 : Name_Not_Found [sage] 2016/12/15(木) 23:36:28.33ID:??? あってるよ : Name_Not_Found [sage] 2016/12/16(金) 12:29:56.52ID:??? test : Name_Not_Found [sage] 2016/12/16(金) 12:34:44.51ID:??? ありがとうございます。 教えていただいたやり方で組み入れたところ、 無事dataにhogeをいれることができました! ありがとうございました! 応用して、別の関数なのですが自身のidをcontent項目に設定させたいと思い、 以下のようにやったのですが、$(this).attr('id')でidを取得することができませんでした。 XXXは個別にDLしたプラグインの関数なのですが、そもそもの考え方として、 XXXが何であれ、「$("#table [id = '100']").XXX({」でidを 使っていることから、その下の「$(this).attr('id')」で 取得できるのではないかと思ったのですが、やはりXXXで処理している内容と関係があるのでしょうか。 あるいはただ単に取得の仕方が誤っているだけなのでしょうか。 : Name_Not_Found [sage] 2016/12/16(金) 12:37:21.02ID:??? です すみません、なぜか「postメソッドをつかってください」というエラーがでてコードを書きこめません。。。 : Name_Not_Found [sage] 2016/12/16(金) 14:52:44.31ID:??? そのthisが何を指しているか調べてみたら? : Name_Not_Found [sage] 2016/12/16(金) 16:18:07.25ID:??? $(this).attr('id')で参照している直下で console.log(this);で何がthisなのかを調べたら解決すると思うよ 不明な場合はlogを吐かすこと : Name_Not_Found [sage] 2016/12/16(金) 19:01:55.36ID:??? console.debugもあるでよ : Name_Not_Found [] 2016/12/18(日) 12:39:44.58:kDK4nXjJ this は呼び出された関数によって変わる vall, apply, bind、コールバック関数等、関数の呼び出され方によっても変わる jQuery#on なら event.curtentTarget に束縛されるし、jQuery.fn.pluginName ( === jQuery.prototype.pluginName ) が jQuery(selectorText).pluginName() で呼び出されるなら pluginName() 内の this 値は jQuery のインスタンスに束縛される : Name_Not_Found [sage] 2016/12/18(日) 12:46:11.98ID:??? thisってもはや一種の引数だよな : Name_Not_Found [] 2016/12/18(日) 12:51:51.24:kDK4nXjJ を訂正 × vall, apply, bind、コールバック関数等、関数の... ○ call, apply, bind、コールバック関数等、関数の... : Name_Not_Found [sage] 2016/12/18(日) 22:36:52.20ID:??? JavaScript, TypeScript の悪名高いthisは、文脈でコロコロ意味が変わる AltJSでは、まともな Haxe を使うと天国 : Name_Not_Found [sage] 2016/12/19(月) 15:44:04.21ID:??? thisはバグの元なので、使わずに済むなら使わない : Name_Not_Found [sage] 2016/12/19(月) 21:23:13.66ID:??? バグの元になるのはJavaScriptを理解してないやつだけ っていうかjQuery使うならばthisも理解ているのが普通 : Name_Not_Found [sage] 2016/12/19(月) 21:29:38.34ID:??? まぁ仕様って言い張られたら理解してないとしか言いようがないがね : Name_Not_Found [sage] 2016/12/19(月) 23:41:20.03ID:??? すみません、教えてください。表(tdのidに000〜999までふられている)に対して、以下のことをやろうとしています。 @idが0で始まる要素にマウスオーバーしたら、そのidを取得し変数jokenに格納→AServletにjokenを引き渡す→Bservletにてjokenを使用してhtmlを作成しjspに返却(HTML内にマウスオーバーしたtdのidを格納)→Chtmlをalertで表示 $(function() { $("#table [id ^= '0']").mouseover(function(event) { var joken = $(this).attr('id'); var html = ""; var deferred = ajax_function(); deferred.done(function() { alert(window.hyo); }); function ajax_function() { var deferred = new $.Deferred(); $.ajax({ url: "Servlet",type: "POST",dataType: "text",data: {joken: joken} }).done(function(data) { window.hyo = data; }).fail(function() { console.log('fail'); }).always(function() { console.log('ajax finish'); deferred.resolve(); }); return deferred; } }); }); ここでお聞きしたいのは、jokenにはマウスオーバーされたtdのidが設定されているのですが、ajaxを通じて帰ってくるdataを格納しているwindow.hyoにはマウスオーバーしたtdではなく、その直前にマウスオーバーしたtdのidが設定されています。 恐らく非同期の為だと思うのですが、マウスオーバーしたtdをwindow.hyoに確実に表示するにはどのようにしたらよいのでしょうか。 : Name_Not_Found [sage] 2016/12/20(火) 08:07:34.06ID:??? 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); }); : Name_Not_Found [sage] 2016/12/20(火) 17:02:00.03ID:??? オレは理解しているけど、理解していない人間も プロジェクト内にはどうしても出てくるし だから社内規約でthisは使用禁止だぜ : Name_Not_Found [sage] 2016/12/20(火) 23:15:11.74ID:??? 横からだが、this は文脈によっては役に立つものだから一律に禁止するのは理解しがたいな 例えば、prototype上のインスタンスメソッド内なら this は有効だろう jQuery#each のコールバック関数内の this 等、ショートコーディングの為だけに引数に代替として this を使用しているのは論外だが : Name_Not_Found [sage] 2016/12/20(火) 23:18:30.85ID:??? 把握できてら良いんだよ : Name_Not_Found [sage] 2016/12/20(火) 23:41:56.89ID:??? eachのthisはsloppy modeで仮引数と挙動が異なる結果になるから使いづらい : Name_Not_Found [sage] 2016/12/20(火) 23:51:35.19ID:??? あーうん、おれもそう思うでー : Name_Not_Found [sage] 2016/12/20(火) 23:52:12.14ID:??? うちはプログラミングが禁止だ。 理解していない人間がいるから : Name_Not_Found [sage] 2016/12/20(火) 23:52:33.42ID:??? インスタンスメソッドはむしろ、thisを使わないと書けない 他にもコールバック関数を指定するビルトイン関数の一部(Array.prototype.forEach等)はthis値を指定できるな 逆にjQueryの.each()はthis値を指定できなくて不便な感がある Function.protype.bindを使えばできるが、forEachと比較すると面倒くさい : Name_Not_Found [sage] 2016/12/20(火) 23:53:41.83ID:??? jQueryのイベントハンドラのthisはよくできてると思う。 DOMのイベントハンドラと同じ仕様になっているから 以降がしやすい。 : Name_Not_Found [sage] 2016/12/21(水) 00:09:36.07ID:??? イベントハンドラのthisは当時はDOM仕様になくて独自拡張だった jQueryが普及してthisが一般的になった影響かDOM4で追従して標準化されたのが現在のthis eventオブジェクトの互換性については良くできているが、this値については余計な事をしてくれた感があったな : Name_Not_Found [sage] 2016/12/21(水) 00:11:26.86ID:??? 当時とかどうでもいいわw 今は仕様 : Name_Not_Found [sage] 2016/12/21(水) 00:13:19.99ID:??? > jQueryが普及してthisが一般的になった影響か 関係ねーだろ。 互換性を高めるために仕様化しただけ jQueryのせいにするな。 jQueryのおかげだというのなら別にいいがw : Name_Not_Found [sage] 2016/12/21(水) 00:14:52.84ID:??? イベントハンドラのthisはevent.currentTargetの代替に過ぎない 正直要らない子だな : Name_Not_Found [sage] 2016/12/21(水) 00:24:43.23ID:??? 逆 thisでいいからcurrentTargetがいらない っていかDOMセンスないよな。 なんでよく使うものに、長い単語を割り当てるんだろうw : Name_Not_Found [sage] 2016/12/21(水) 00:28:38.13ID:??? DOM3 当時は listener オブジェクトがあるから this === event.currentTarget にしなかったのだと思う document.addEventListener('click', {n: 1, handleEvent: function (event) { console.log(this, event.currentTarget); }}, false); : Name_Not_Found [sage] 2016/12/21(水) 00:29:28.68ID:??? thisは便利だし必要不可欠だぞ thisをディスる奴は許さん : Name_Not_Found [sage] 2016/12/21(水) 00:32:49.63ID:??? forEachもそうなんだが、コールバック関数においてthis値は「異なるスコープから値を送り込む手段」の一つだからな thisが予約されているとその手段が使えなくなる : Name_Not_Found [sage] 2016/12/21(水) 00:43:57.82ID:??? getelementBy〜 getelementsBy〜 考えたやつ死ね : Name_Not_Found [sage] 2016/12/21(水) 00:50:09.32ID:??? リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice) | Dustin Boswell, Trevor Foucher, 須藤 功平, 角 征典 |本 | 通販 | Amazon ttps://www.amazon.co.jp/dp/4873115655 ショートコーディングにしか目が向いていない人にこそ読んでほしい本 : Name_Not_Found [sage] 2016/12/21(水) 08:53:20.12ID:??? リーダブルとは関係ない話 長い名前をつければ読みやすいってわけじゃないんだから。 逆に冗長な名前は読みにくい。 : Name_Not_Found [sage] 2016/12/21(水) 13:00:05.29ID:??? それでも原則として禁止だよ どうしても必要なときはしょうがないけど : Name_Not_Found [sage] 2016/12/21(水) 13:30:27.90ID:??? そうすると、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系全般が利用禁止なのは不便で仕方ないと思うのだが、クロージャを使って似たような事をやっていくつもりなのか… : Name_Not_Found [sage] 2016/12/21(水) 13:39:47.97ID:??? 頼むから個々のローカル・ルールを議論しないでくれよ : Name_Not_Found [sage] 2016/12/21(水) 21:13:15.82ID:??? ○○禁止みたいなルールは、バカ向けのルールであって どういう場合にでも当てはまることはほとんどないよ。 長い名前が必ずしも読みやすいとは限らないし、 短い名前が必ずしも読みやすいわけでもない。 状況によって変わるもの バカはその状況の判断ができない。 だから何も考えなくて済む単純なルールを作る、欲しがる。 バカだから何も考えない。考えたくなーい(笑) 単純なルールを言う奴は無視しましょう : Name_Not_Found [sage] 2016/12/21(水) 23:53:30.85ID:??? Kotlin では、すべてのオブジェクトが使える、スコープを変える関数が、4つある apply, let, run, with with(obj){ ここでは、thisが、objに変わる } : Name_Not_Found [sage] 2016/12/22(木) 20:29:30.43ID:??? バッチリ禁止やね Javascript出来ます! って胸張ってる人に合わせるということは つまりそういうことなんよ。 ルールはアホを縛るためにあるんでね : Name_Not_Found [sage] 2016/12/22(木) 21:46:43.46ID:??? アホを縛ったとしてもアホが賢くなるわけじゃない。 アホがいる限り、アホのレベルに落ちる。 : Name_Not_Found [sage] 2016/12/22(木) 22:03:07.36ID:??? まあぶっちゃけ普通のサイト作成で自作コンストラクタを使う機会なんて滅多にないし、this禁止でもなんとかやって行けるか : Name_Not_Found [sage] 2016/12/22(木) 22:09:02.67ID:??? this禁止のメリットは? : Name_Not_Found [sage] 2016/12/22(木) 22:09:26.07ID:??? アホ禁止=自分がアホだから : Name_Not_Found [sage] 2016/12/23(金) 06:56:55.52ID:??? 学習させようという気はなくて全員をアホのレベルまで落とす方向なのね 小規模コードならそれでもいいだろうけど、車輪の再発明を繰り返しそう : Name_Not_Found [sage] 2016/12/26(月) 13:14:44.97ID:??? 逆だよ 大規模コードになると人数が増えるし 人数が増えればどうしたってアホが混じってくるんだよ そんなときアホ共に車輪を再開発させないための縛りだ : Name_Not_Found [sage] 2016/12/26(月) 13:44:21.07ID:??? 内輪で「これ、あれ、そこ」と同じ 理解できると速いんだけどね : Name_Not_Found [sage] 2016/12/26(月) 15:39:53.24ID:??? そしていつの日か、その会社では何語とも呼べない奇怪なやりとりが飛び交うようになっていたのである : Name_Not_Found [] 2016/12/27(火) 10:30:46.41:QoABq16V jQueryを使ったJavaScriptのプログラムを使おうと思ったら、 Chrome系で使えない状態です。Parallaxのプログラムです。 そのプログラムは3年前に書かれたようなんですが、 作者に問い合わせたら当時は動いていたそうです。 EdgeやFirefoxでは問題なく動いています。 3年前と今ではChromium系ではJavaScriptが大きく変わったのでしょうか? どんなところを修正すれば、治せそうでしょうか? : Name_Not_Found [sage] 2016/12/27(火) 10:38:29.15ID:??? どんなところが動かないかlogを吐かせて 調べて見たら治ると思いますよ : Name_Not_Found [sage] 2016/12/27(火) 19:18:17.41ID:??? jQuery本体、最新版を読み込んでるなら当時のものを読み込むようにする 大きいところではlive()が無くなってたりする の通り、コンソール見れば Uncaught TypeError: $(...).aaa is not a function こんな感じでエラーが返ってるはず : Name_Not_Found [sage] 2016/12/27(火) 23:26:09.69ID:??? Chromeの開発者ツールを起動して、デバッグすればいい : Name_Not_Found [sage] 2016/12/27(火) 23:31:26.83ID:??? EdgeやFirefoxでは問題なく動いてるっていうのならjQueryの問題じゃないだろう。 EdgeであるならChromeとそう変わらないんだからjQueryの範囲で ブラウザ依存の問題が発生することはまずないだろう。 だからjQueryとは直接関係ない部分に問題があるとみて間違いない : Name_Not_Found [sage] 2016/12/27(火) 23:34:08.68ID:??? キャッシュでも効いてるんじゃないか それか拡張機能と何か干渉してるか : Name_Not_Found [sage] 2016/12/27(火) 23:48:28.86ID:??? 教えてください。 要素のIDを取得する場合は、 var idname = $(this).attr("id"); でできるのですが、$(this)の背景色を取得する場合はどうしたらよいのでしょうか。 idをbackgroundcolorやcolorに変更してもできませんでした。 : Name_Not_Found [sage] 2016/12/27(火) 23:57:39.02ID:??? // スタイルシートから $(this).css('background-color'); // 要素から $(this).style('background-color'); : Name_Not_Found [sage] 2016/12/28(水) 00:08:49.34ID:??? 寝ぼけて間違っていたわw $(this).css('background-color'); これでいける : Name_Not_Found [sage] 2016/12/28(水) 00:15:47.61ID:??? ハイフンが足りなかったのですね、、、 どうもありがとうございました! : 156 [sage] 2016/12/28(水) 17:55:41.14ID:??? 皆さんありがとうございます。 jQuery1.11.1.jsだとr.handleというところが引っかかるようですね。 CallStackの所にこれが表示されます。 jQueryのバージョンを変えるとこれは出なくなりますが動きません。 元のソースでは ttp://https://code.jquery.com/jquery-latest.min.js "> ttps://code.jquery.com/jquery-latest.min.js で取り込んでました。 今開くとver.1.11.1のようです。 1.0から順に1.12.4まで入れ替えてみましたが反応しません。 >>160 シンプルにこれ一つのスクリプトしか使ってないので、 コンフリクトが起きているわけではないようです。 CSSも弄ってみたのですが変化がありません。 : Name_Not_Found [sage] 2016/12/28(水) 18:16:22.65ID:??? > jQuery1.11.1.jsだとr.handleというところが引っかかるようですね。 > CallStackの所にこれが表示されます。 そのポイントを精査して何が不整合の原因かを調査しないと進まないよ : Name_Not_Found [sage] 2016/12/29(木) 00:02:47.98ID:??? ブラウザの開発者ツールを起動して、1行ずつデバッグする。 エラーメッセージを取得して、それで検索する 動きませんと書いても、エラーメッセージが無いと、他人にはわからない : Name_Not_Found [sage] 2017/01/04(水) 13:22:31.50ID:??? ChromeでMacだと問題なくて、 Winだとエラーも出さず無反応の場合、 何が考えられますか? : Name_Not_Found [sage] 2017/01/04(水) 13:53:25.96ID:??? 一番めんどくさいパターンだなw コンソールで追いかけるしか無いと思う 開発ツールのsourceを開いて{}をクリック 適当にブレークポイントをかましていこう : Name_Not_Found [sage] 2017/01/04(水) 14:59:31.88ID:??? HTTPでのデータアップロードの進捗状況 35 MB/100 MB (800 kB/s)的なものを 表示するのをjQueryで出来たりしないかななんて思ってるですが、そもそも ソリューションとしてjQueryを選ぶのはあってますでしょうか? : Name_Not_Found [sage] 2017/01/04(水) 15:08:06.63ID:??? あってるよ。頑張って ttp://senoway.hatenablog.com/entry/2013/06/13/112935 ただこれ、コードが古くて動かないかもしれない : Name_Not_Found [sage] 2017/01/04(水) 15:13:18.93ID:??? 方向性はあってるのですね そこを参考に頑張ってみます レスありがとうございました : Name_Not_Found [sage] 2017/01/13(金) 07:44:32.35ID:??? すみません、教えていただけないでしょうか。 「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(); }); : Name_Not_Found [sage] 2017/01/13(金) 07:45:52.33ID:??? 続けてチェックボックス群になります。 【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> : Name_Not_Found [sage] 2017/01/13(金) 09:34:33.83ID:??? Check 外す はボタンだろう。これがチェックボックスはわかりづらい チェックボックスでいくなら jQuery('#select-form input[name=jikan-check]').on('change', //ここにifをかます。input[name=jikan-check]にチェックがついてない時 if( ){ //後は処理 function(e, param) { 省略 } : Name_Not_Found [sage] 2017/01/13(金) 14:18:12.95ID:??? jQuery('#select-form input[name="jikan-check"]').on('change', function(e, param) { console.log($(this).prop('checked')); }).change(); 意味がよく解らないけど、こういうことかな? : Name_Not_Found [sage] 2017/01/13(金) 22:23:26.93ID:??? > 「all_offというチェックボックスを押すと、name=jikan-checkに当てはまるチェックボックス(以下チェックボックス群)を全てチェックオフとする」ようなコードを作成しました。 そのコードがない : Name_Not_Found [sage] 2017/01/13(金) 23:30:37.05ID:??? <input type="checkbox" id="all_off" /> これはbuttonにするべきだね、意味が無いよ : Name_Not_Found [sage] 2017/01/14(土) 09:49:20.52ID:??? all_off と言いつつ all_on でもある : Name_Not_Found [] 2017/01/16(月) 15:58:03.47:3x0ZwRQg 以下のように、離れた場所にscriptを書いた時 実行される順番は保証されていますか? 何かの原因で console.log(2); console.log(1); となることはないでしょうか(IE9以前などの古いブラウザは考えなくても良いです) <script> $(function(){ console.log(1); }); </script> <script> $(function(){ console.log(2); }); </script> : Name_Not_Found [sage] 2017/01/16(月) 19:07:36.39ID:??? jQuery3以降だと$(function())は 何らかのエラーが有るとスルーするよ : Name_Not_Found [sage] 2017/01/16(月) 19:14:06.73ID:??? おー、なるほど。ありがとうございます! : Name_Not_Found [sage] 2017/01/16(月) 19:27:46.67ID:??? var result; $.ajax({ type: 'GET', async: false }).then(function(html){ result = $(html).find('span')).text() }); console.log(result); こういう同期もjQuery3以降だとできない : Name_Not_Found [sage] 2017/01/16(月) 19:30:32.42ID:??? あれ同期できなくなったの? たまに使うんだけど・・・ : Name_Not_Found [sage] 2017/01/16(月) 22:33:00.92ID:??? ttps://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest ttps://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests ここらへん読めばわかるけど、そもそもAjax通信の同期処理は推奨されない。 非同期に比べてパフォーマンス悪いし、制限や注意点満載。 将来主流になるとみられるFetch APIも非同期しかできないはず。 👀 Rock54: Caution(BBR-MD5:0be15ced7fbdb9fdb4d0ce1929c1b82f) : Name_Not_Found [sage] 2017/01/17(火) 14:31:33.89ID:??? というか、JavaScript自体が非同期なんだよ : Name_Not_Found [sage] 2017/01/18(水) 20:23:26.10ID:??? JavaScript自体が非道 : Name_Not_Found [] 2017/01/25(水) 14:42:22.30:D8F8l0HB 初心者です。もしわかる方いたら教えてください。 下記URLで紹介されているプラグインを使用し、入力フォームにて 日本語入力を行うとふりがな、ローマ字に自動変換できるようにしています。 ttps://github.com/heeesa/autocomplete_romaji_hiragana Chrome、IE(※)、EDGEでは問題なく動くのですが fixefoxだけ日本語を入力しても何も起こりませんでした。 どうにかしてfixefoxでも動くようにできないものでしょうか。 よろしくお願いいたします。 ※最初IE11で動かなかったのですが、UA判定の部分を少し書き換えたら直りました。 : Name_Not_Found [sage] 2017/01/25(水) 15:13:20.60ID:??? そういうのは作者に直接問い合わせるべきなのでは? ここは修正代行サービスではありませんよ 軽くソースを見る限りではUA Detection的なコードがあるのでそれを何とかしないといけない感じですね ttps://github.com/heeesa/autocomplete_romaji_hiragana/blob/master/autocomplete_romaji_hiragana.js#L6 e.which のコードが実装依存なので e.keyCode にすれば動くかもしれません ttps://github.com/heeesa/autocomplete_romaji_hiragana/blob/master/autocomplete_romaji_hiragana.js#L24 この手のブラウザの実装差異はjQueryが内部的に吸収してくれるので標準APIだけを使っていればいいはずですが、作者はそれを知らないようです コードがとても古臭い書き方なので一から作り直した方がいい印象ですね : Name_Not_Found [sage] 2017/01/25(水) 15:13:56.82ID:??? else if (currentBrowser == "firefox" || currentBrowser == "gecko"){ // ここが空 } Firefoxには未対応だろ? 自分で空の部分を作るしかない : Name_Not_Found [sage] 2017/01/25(水) 20:31:29.76ID:??? それ使ったらだめレベルだな。 autocompleteという名前からして間違ってる。 俺のやる気が出たら書いてやるよ : Name_Not_Found [sage] 2017/01/25(水) 20:40:36.53ID:??? とりあえずjsfiddleで動かせるようにしてみた ttps://jsfiddle.net/nxd0u6mL/ : Name_Not_Found [sage] 2017/01/25(水) 20:43:36.65ID:??? ちょっと見づらかったので変更 ttps://jsfiddle.net/nxd0u6mL/2/ : Name_Not_Found [sage] 2017/01/25(水) 21:10:46.89ID:??? めんどくさw 飽きてきた : Name_Not_Found [sage] 2017/01/25(水) 21:14:27.79ID:??? IMEで確定前の文字入力は何を入れても229が押されたことになるのか この手のインターフェースはたまーにみるけどbackspaceとか押したときとか まともに動いたためしがない。ちょっとやってみてその理由がわかったわw どうやってひらがな取るのがいいんだろうな(もはや元のコードは参考にしてない) : Name_Not_Found [sage] 2017/01/25(水) 21:55:24.65ID:??? FirefoxはIMFでEventを拾わないから駄目だろ : Name_Not_Found [sage] 2017/01/26(木) 00:34:54.08ID:??? は逃げるのが早すぎる : 196 [sage] 2017/01/26(木) 00:59:38.92ID:??? この手のやつって入力訂正とかしたら めちゃくちゃになるんだよな で閃いた。 漢字からひらがな(ローマ字)に変換するのはどうだろうか? もちろん漢字の読み方は複数ある。それはタイプした文字から確率的に選択する。 例えば「東」からひらがなに変換する時「あずま」と「ひがし」があるが 漢字を入力するときに、タイプされた文字が、AZUMA に近いか HIGASHI に 近いかで判断する。誤入力があったとしても、どの文字が入力されたかで判断すれば それなりの精度で正しくひらがなに変換できると思う ちなみにこれを実現するには、サーバー側の対応と名前辞書が必要になるので簡単にはできないよw : Name_Not_Found [sage] 2017/01/26(木) 01:05:41.95ID:??? と思ったけど、名字だけで30万種類、多いっちゃ多いけど 圧縮すれば名前辞書サイズは200KBぐらいになるかもしれない。 サーバー側がなくても不可能ではないかもね。 いや、そもそも、漢字→読み方 のデータさえあればいいのだから ウェブサーバーに単なるファイルを置くだけで十分か : Name_Not_Found [sage] 2017/01/26(木) 01:07:50.09ID:??? ごめん、名前の漢字(?)ごとに分けたファイルという意味 本当に漢字ごとだとファイル数多くなるからある程度工夫した方がいいと思うけど : Name_Not_Found [sage] 2017/01/26(木) 01:20:48.83ID:??? 形態素解析使えばいい。igoとかyahooAPIで十分だろう 変換前の取得はやめたほうがいい。あれは死ぬ googleはすげー精度+速度でサジェスト出してくれるけどあれは神業だわ : Name_Not_Found [sage] 2017/01/26(木) 01:50:44.13ID:??? 形態素解析は知ってるけどあえて言わなかったんだよ。 名前辞書っていうのはそういうこと。 用途を限定することで実用レベルになるように考えてる : Name_Not_Found [sage] 2017/02/02(木) 16:58:35.30ID:??? httpsのサイトからhttpのサイトにjqueryでajaxしてデータ取得出来るの? セキュリティのエラーで失敗する? : Name_Not_Found [sage] 2017/02/03(金) 11:32:12.68ID:??? 当然できるし逆も問題ない : Name_Not_Found [sage] 2017/02/03(金) 11:47:03.12ID:??? でも例えばhttpsのページに<img src=http:// ... が有るとエラーするやん? Ajaxならエラーせずにimgをget出来ちゃうの? : Name_Not_Found [sage] 2017/02/07(火) 18:08:32.45ID:??? 80が開いてれば当然できる : Name_Not_Found [sega] 2017/02/10(金) 21:58:11.44ID:??? iframe(同じドメイン)の中身を取得したいんだけど その中身がHTMLじゃなくてテキストの時 どうやって取得すればいいかわからない ただのテキスト、bodyもなにもないときは jqueryは無力なのか? : Name_Not_Found [sage] 2017/02/10(金) 22:02:01.75ID:??? 無力っていうかDOM用ライブラリでテキストファイルを扱うってのがおかしいでしょ jQueryでCSVファイルの解析もできないけど、jQueryは無力か?なんて言わないでしょw : Name_Not_Found [sage] 2017/02/10(金) 22:03:40.90ID:??? bodyあったわ : Name_Not_Found [sage] 2017/02/11(土) 23:48:17.29ID:??? わがまま : Name_Not_Found [] 2017/02/13(月) 14:50:27.92:MowOr5ui ウィンドウサイズで読み込む外部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だと画面サイズ関係なく機能してくれません。 どのブラウザでも動く他の方法はありませんか? : 212 [sage] 2017/02/13(月) 15:26:24.26ID:??? 失礼しました。 Webサーバー上だと機能するようです。 ローカルだとFirefoxだけ反応してくれます。 : Name_Not_Found [sage] 2017/02/13(月) 15:44:21.14ID:??? 中身見てないけどそのままはっつけたらelseでシンタックスエラー出たよ : Name_Not_Found [sage] 2017/02/13(月) 17:18:40.95ID:??? ajaxはhttp通信可能な環境が必要 ローカルテストするならHTTPサーバをたてる必要がある : Name_Not_Found [sage] 2017/02/13(月) 17:56:42.16ID:??? ところで、js読み込んだ後にリサイズした場合はどうすんの? リサイズするたびに読み込むってのもアレだし設計見直した方がよさそうな気がするけど : 212 [sage] 2017/02/13(月) 19:58:27.96ID:??? みなさんありがとうございます。 Firefoxはローカル環境でできるのが特別なんですね。 メインはスマホ対策です。 無駄にソースを読ませたくないのと、 間違っても今まで実行されなかったのがブラウザの違いや、 バージョンアップで動くようになってしまうということを防ぎたいからです。 : Name_Not_Found [sage] 2017/02/13(月) 23:37:30.09ID:??? > ところで、js読み込んだ後にリサイズした場合はどうすんの? 意外とウインドウのリサイズはしないw > メインはスマホ対策です。 ただしスマホはよくリサイズするw (縦横回転するのでね) : Name_Not_Found [sage] 2017/02/13(月) 23:40:15.75ID:??? jqueryとphpがなかなかマスターできない… コピペで大体は行けるけどソース見たら絶対ダサいんだろうなw 中途半端に使えるもんだから勉強するにもやる気が…。 : Name_Not_Found [sage] 2017/02/13(月) 23:42:35.26ID:??? 間違ってるからなw なんでわざわざ見づらく書くんだろうか // ちゃんと改行しただけ 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}); }); : Name_Not_Found [sage] 2017/02/14(火) 00:06:31.28ID:??? まぁ分かる 保守するようになれば何が悪いか分かる function foo(){} function foo2(){} というソースを見ればもう少しちゃんとしようと思うよ 一度以前作ったサイトの手直しをしてみては? 多分数倍の速さで作れる : Name_Not_Found [sage] 2017/02/14(火) 00:28:05.97ID:??? 実務でやってるのにこれだからなw うん、ポートフォリオサイトも制作中だし振り返りつつ勉強し直すわ… : Name_Not_Found [sage] 2017/02/14(火) 12:05:41.65ID:??? ポートフォリオサイトっていちいち作るものなの? 現在稼働中なのをそのまま見せびらかすんじゃだめなの? : Name_Not_Found [sage] 2017/02/15(水) 00:38:58.91ID:??? ポートフォリオなんざ、Dribbbleのリンク張るだけで十分だろ : Web初心者 [] 2017/02/18(土) 22:07:09.16:uejddEaq こんにちわ、初めまして。 2月からweb系の業務に初めて着きまして、 何から勉強していいのかさっぱりで困っております。 ソースを見るとjqueryが中心で書かれてるようで、 ここから勉強したほうがいいのかなと思っております。 何かよい参考サイトなどご存知でしたらご教授お願いいたします。 : Name_Not_Found [sage] 2017/02/18(土) 22:46:43.62ID:??? お経でも唱えたほうがええかもな… : Name_Not_Found [sage] 2017/02/18(土) 22:46:56.13ID:??? 一番いいのは公式サイト ttp://api.jquery.com/ ttps://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で古いんだがまだマシ ttp://js.studio-kingdom.com/jquery/ : Name_Not_Found [sage] 2017/02/18(土) 22:55:46.35ID:??? 1.7ではlive()等、かなり重要な関数が使えなくなったんだよな。あれは本当に困った 古いリファレンスやコード、プラグインでは未だに使ってることもあるので、 jQuery Migrate plugin ってのを覚えておいたほうがいい。これを入れておくだけで昔のコードが使えるようになる。 : Name_Not_Found [sage] 2017/02/18(土) 23:01:14.36ID:??? あとアップグレードガイドも読んでおくといい ttps://jquery.com/upgrade-guide/ ttps://jquery.com/upgrade-guide/1.9/ ttps://jquery.com/upgrade-guide/3.0/ 日本語の翻訳も探せば見つかると思う。これとか ttp://qiita.com/fmy/items/345a264a1cf2e2a73f62 参考サイトを探している段階なら、世の中にある古いやり方や間違ってるやり方に惑わされやすい。 例えば $(document).ready(function() {・・・}); という書き方は非推奨になった。 これは俺が何年も前からずっと言ってきたことなんだが $(function() {・・・}) という書き方が公式に推奨されるようになった ttps://api.jquery.com/ready/ > As of jQuery 3.0, only the first syntax is recommended; > the other syntaxes still work but are deprecated. 理由はこっちで詳しく説明してあるな。 ttps://www.webprofessional.jp/jquery-document-ready-plain-javascript/ : Name_Not_Found [sage] 2017/02/18(土) 23:03:05.51ID:??? Migrateっていうのは移行という意味。 jQuery Migrate pluginというのは昔のコードを動かすためではなくて、 昔のコードから新しいコードへMigrate(移行)させるためのもの 未だにjQuery Migrate pluginが必要とされるようなものは 捨てるべきだよ。 : Name_Not_Found [sage] 2017/02/18(土) 23:20:30.47ID:??? jQueryはよく使われている分、ネットで初心者共が クソコードさらしてるので、ちゃんとした本で勉強するのが一番 俺のおすすめはこれ コアjQuery+プラグイン/jQuery UI開発実践技法 JQuery in Action 2nd Edition ttps://www.amazon.co.jp/dp/4798124281 ttp://www.shoeisha.co.jp/book/detail/9784798124285 初心者には少し難しいかもしれないがjQueryの基礎を勉強しつつ この本で正しいやり方になおしていくと良い ちなみにこの本はタイトルからわかりづらいが、海外で有名な in Actionシリーズの翻訳本でクオリティーが高いことは保証済み ttp://d.hatena.ne.jp/ryoasai/20101029/1288362232 > Manningのin actionシリーズはMEAP(Manning Early Access Program)という > 事前評価プロセスを通して、クオリティーを十分に高めてから出版されることもあり、 > 比較的あたりはずれが少なく良書が多いと思います。 : Name_Not_Found [sage] 2017/02/19(日) 01:29:10.92ID:??? 山田祥寛(よしひろ)、翔泳社 10日でおぼえる jQuery 入門教室 第2版 この本が簡単 : Name_Not_Found [sage] 2017/02/19(日) 01:33:03.49ID:??? 10日でおぼえられるわけがないものを 10日でやるとか言ってるものは信用できない。 そういうのは10日だけでやれることしかしない という意味でしかない : Name_Not_Found [sage] 2017/02/19(日) 01:36:38.96ID:??? これか?w 10日でおぼえるjQuery入門教室 第2版 ttps://www.amazon.co.jp/dp/B00FZIZOLC/ トップカスタマーレビュー 5つ星のうち 3.0ステマ 投稿者 oper 投稿日 2013/11/13 形式: 大型本 山田さんの書籍は比較的安定していて、この本も悪くはないのですが、星5つのレビューが全員WINGS(山田さんのプロジェクトらしい)の本に星5つつけまくっている点に失望しました。 内容で勝負すればいいのにね。 コメント 50人のお客様がこれが役に立ったと考えています. このレビューは参考になりましたか? : Web初心者 [] 2017/02/19(日) 02:31:42.29:PjnF9NV1 皆様ほんとうにありがとうございます。 ここにたどり着くまで、 色々Webを漁ってたのですが、 どの情報を当てにしていいのか(特に新しい、古いなど) 途方に暮れておりました。 「ヌー」も検索トップのほうにあったので、、、 227さんありがとうございます。 これからも、お恥ずかしい質問をするかもしれませんが、 宜しくお願いいたします。 とりあえず、ゴリゴリ書いて覚えていきたいと思います。 : Name_Not_Found [sage] 2017/02/19(日) 09:51:05.25ID:??? 実際に書き始めて一ヶ月も経てば新しい古い、宛になるかどうかはわかるようになる : Web初心者 [] 2017/02/19(日) 23:29:53.35:PjnF9NV1 習うより慣れろですね。 : Name_Not_Found [] 2017/02/20(月) 00:05:03.30:ffJ5gnsX 2ちゃんねる初心者です。 学校の課題で今週の木曜までに自分のwebを作成して提出するというものが出ているのですが、見え隠れするサイドバーを入れようと思っています。 ちなみに課題の条件条件としてbxSliderを用いること、トップページのみの作成ということです。現在見え隠れするサイドバーを作ろうとしている所なのですが、やり方を調べ、html、cssやjavascriptのコード?のようなものは見つけました。 しかし、cssとjavascriptのコード?をどのようにして、どこに入れればいいのか全くわからない状況です。 何か分かる事がある方がいたら教えてください。 : Name_Not_Found [sage] 2017/02/20(月) 00:19:23.26ID:??? 個人的にこれが一番好き ttps://www.adchsm.com/slidebars/ 使い方は↓をまるごとコピペしたら動くだろ、多分 ttp://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-slidebars.html : Name_Not_Found [] 2017/02/20(月) 00:47:27.13:ffJ5gnsX 返信ありがとうございます。試しに丸ごとコピー&ペーストをしてみたのですが、以下のような文が出てきました。 このファイルはANSIテキスト ファイルとして保存すると失われてしまうUnicode形式の文字を含んでいます。 Unicodeの情報を保存するには、[文字コード」から[Unicode]を選択してください。 と出てきますが、この後どのように対処すれば良いでしょうか。 : 232 [sage] 2017/02/20(月) 02:22:18.62ID:??? 山田祥寛(よしひろ)、翔泳社 10日でおぼえる jQuery 入門教室 第2版 10日でおぼえる PHP 入門教室、第4版、2012 彼の本を使うと、なぜ10日で出来るのか? イラストもふんだんに使っていて、予算が大きい。 最初から売れることが分かっているから、本を作る予算が大きい 一方、オライリーなどの本は、著者の書き殴りで、図など無いから、理解できない。 外国の本は、図解したり編集する、能力が無いから 山田祥寛の講座は、4万円で定員100名とか。 他にも、Java, Ruby など様々な言語本も、書いている 短時間で分からせるのには、教える技術がある。 TACとかの専門学校・塾とかと同じ。 パッと本を開いた瞬間に分かる : Name_Not_Found [sage] 2017/02/20(月) 02:51:59.44ID:??? じゃあなんでレビューしている人が サクラしかいないんですか? : Name_Not_Found [sage] 2017/02/20(月) 02:53:41.93ID:??? 初心者用ピアノ入門をよんでも プロにはなれません・・・ : Name_Not_Found [sage] 2017/02/20(月) 09:08:00.30ID:??? 下手なステマはやめとけ これ以上やると、オススメの書籍は?の質問に 「ステマおじさん山田祥寛以外の本なら何でも」という回答がデフォルトになるだろう 別にこれ自体はどっちでもいいんだけど余計な仕事増やさないでくれ : Name_Not_Found [sage] 2017/02/20(月) 10:33:11.86ID:??? 内容より先に予算どうこうっていう時点で読んでないだろお前 って思っちゃう : 232 [sage] 2017/02/21(火) 00:40:41.97ID:??? オライリーなどの翻訳本は、翻訳者の印税も掛かるし、難しい本が多いから、あまり売れない。 だから、図・イラストを描いたりする、予算が付かない。 イラストレーターの印税か、料金も掛かる だから、本をちょっと見ただけで、その本の予算が大きいかどうかが、すぐにわかる。 つまり、売れる本かどうかが、すぐにわかる 基本的に、初心者向けの本しか売れない : Name_Not_Found [sage] 2017/02/21(火) 10:25:16.08ID:??? なぜこいつは無根拠に売れる/売れないを断言出来るんだ? : Name_Not_Found [sage] 2017/02/21(火) 12:20:31.73ID:??? 売れないと困るだろ : Name_Not_Found [sage] 2017/02/21(火) 12:39:09.80ID:??? そんな事は読者に関係ないだろ : Name_Not_Found [sage] 2017/02/21(火) 19:19:01.79ID:??? しかしここまで印象最悪なステマも珍しいな : Name_Not_Found [sage] 2017/03/02(木) 19:05:46.77ID:??? > 367 Name_Not_Found sage 2017/03/02(木) 16:05:49.27 ID:??? > jQuery経由で実行すると実行速度が数倍かかるのは避けられないのかな ttp://echo.2ch.net/test/read.cgi/hp/1485265364/367 何事もトライアンドエラーだよ 疑問に思ったことはいくつもの比較コードを書いて検証してみればいい 自分で検証する気がないなら諦めるべきだけどね : 4days ◆6xK9k12f2U [] 2017/03/15(水) 08:43:34.81:rTO8PoDO WEBプログラミング板のスクリプト改造スレから「web制作管理板のjQueryスレで聞いた方が良いかも」と誘導されて参りました。 荒らし報告ツールの改造についてどなたか御対応できないでしょうか。 詳細は下記となります。 ttp://tamae.2ch.net/test/read.cgi/php/1314546533/178 本当に「jQueryスレ」がここで正しいのか自身がなく、かつスクリプト改造依頼になりますので、 正しい対象スレッドなどがありましたら、そちらに誘導をお願いできましたらと思います。 : Name_Not_Found [sage] 2017/03/15(水) 09:27:13.16ID:??? スレなければ作れば良いんだよ。 : Name_Not_Found [sage] 2017/03/15(水) 09:34:05.48ID:??? これはめんどくさいな〜 これを改造するなら拡張機能になるけどめんどくさすぎる 1からサイト作ることになるけど誰が管理するの? 多分自分で勉強して作ったほうが良いと思う もしかするとエクセルvbaの方が楽に作れるかもしれない : Name_Not_Found [sage] 2017/03/15(水) 13:53:38.91ID:??? if($(window).width() < 541)){ $(".foo").scroll(baz); }else { $(.bar).scroll(baz); } function baz() { : Name_Not_Found [sage] 2017/03/15(水) 13:59:50.81ID:??? 以下の時、うまくまとめて書く方法はありますか? 無名関数に名前をつけたり、変数に入れずになんとかやろうとしていましたがこんがらがってきました ・スクロールさせた時に関数を実行 ・画面サイズ(540pxがしきい値)でスクロールする対象のオブジェクトは変わる。モバイルは.foo、PCはwindow全体 ・無名関数で実行したい ・変数や関数の名前を使いたくない if($(window).width() < 541)){ $(".foo").scroll(baz); }else { $(window).scroll(baz); } function baz() { /* 処理 */ } : Name_Not_Found [sage] 2017/03/15(水) 14:39:28.84ID:??? /*処理*/の内容に依存していて、コードも変わってくる気がする 変数など宣言はしたくないのはなぜか、はとりあえず置いといて ($(window).width()<541?$(".foo"):$(window)).scroll(function(){/*処理*/}) : Name_Not_Found [sage] 2017/03/15(水) 14:45:39.48ID:??? おー、ありがとうございます!すごい! : Name_Not_Found [sage] 2017/03/15(水) 18:32:23.84ID:??? ttp://aa.2ch.net/test/read.cgi/mona/0000000000/600 2003/10/20 16:49:51.77 ID:abc+123/0 (URL) (日付) (時刻) (ID)の順 出力された書式4文字列は、時系列順に昇順ソートされていること 以下のような複数のURLへアクセスして、日付・時刻・IDを取り出して、 ttp://hanabi.2ch.net/test/read.cgi/wcomic/1437192131/117 ttp://hanabi.2ch.net/test/read.cgi/wcomic/1438080242/102-104 以下のように連結すれば良いのか? ttp://hanabi.2ch.net/test/read.cgi/wcomic/1437192131/117 2016/12/24 14:59:42.97 ttp://hanabi.2ch.net/test/read.cgi/wcomic/1438080242/102 2016/12/24 14:59:51.98 ttp://hanabi.2ch.net/test/read.cgi/wcomic/1438080242/103 2016/12/26 13:43:51.12 その処理だけを、新しく作ったらどうか? 「こらこら団報告書生成」ツールのソースコードを分析して、修正するのは大変だろ : Name_Not_Found [sage] 2017/03/15(水) 22:52:38.19ID:??? 一般論として、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セレクタで判別するとかね : Name_Not_Found [sage] 2017/03/15(水) 23:35:34.77ID:??? でさ、今更気づいたんだけど、 画面表示されてからサイズ変えた時大丈夫? まああんまりやることはないと思うけどさ、 何か違和感あると思ったら、そこなんだったんだな。 通常イベントハンドラっていうのは最初のページ表示時につけて それ以降付け替えたりしない。付け替えたりしなくても動くようにするんで 画面サイズで切り替えたりしないんだよね : Name_Not_Found [sage] 2017/03/15(水) 23:41:37.02ID:??? こうじゃないの? にしてもscrollの対象が変わることなんてあるんけ? $([$(".foo")[0],window]).scroll(function(){ //ここで分岐 }); : Name_Not_Found [sage] 2017/03/16(木) 01:14:49.08ID:??? jQuery Mobile は、パソコン・スマホ共用 : 4days ◆6xK9k12f2U [] 2017/03/16(木) 07:40:10.57:T/B05wZT ご返答ありがとうございます サイトぐらいは自分で作りますよ そして色んな人に使って貰いたい 自分だけが報告するわけじゃなくみんなで報告しやすいようにと考えると やっぱりこのようなWeb系のツールが最良ですので >多分自分で勉強して作ったほうが良いと思う 良い悪いではなく出来る出来ないの問題でして >その処理だけを、新しく作ったらどうか? それができたらここには来てませんね : Name_Not_Found [sage] 2017/03/16(木) 08:24:01.15ID:??? なぜ、そんなに偉そうな態度をとれるのだろう? サイトを自作するならJavaScriptも自分で作る気概を見せなよ ここは制作依頼する場所ではなく、質問者が作るのを手助けする場だからね 丸投げはNG : 4days ◆6xK9k12f2U [] 2017/03/16(木) 08:48:21.67:T/B05wZT やはり最初からこのスレは趣旨として正しくなかったと言うことですね ではにも明記しましたように 正しい対象スレッドなどがありましたら、そちらに伺いたいと思います。 どこか趣旨に合致するようなスレッドをご存じないでしょうか? お手数をお掛けします。 : Name_Not_Found [sage] 2017/03/16(木) 08:51:56.12ID:??? ウダウダ言い訳せずに作ったほうが早い プログラムなんて納期を考えなければいつか出来るもの ・入力。ajaxは使わない ・phpでfile_get_contentsでサーバーに保存 ・エンコード ・htmlをパース ・配列に突っ込んでソート ・出力 これだけ。 セキュリティの知識不要だから楽勝 で、jqueryもajaxは使わないので移行はスレチ : Name_Not_Found [sage] 2017/03/16(木) 08:52:34.74ID:??? Webサイト制作初心者用質問スレ part247 [無断転載禁止]?2ch.net ttp://echo.2ch.net/test/read.cgi/hp/1488192984/ : 4days ◆6xK9k12f2U [] 2017/03/16(木) 08:55:23.96:T/B05wZT ありがとうございました 感謝いたします : Name_Not_Found [sage] 2017/03/16(木) 14:04:17.85ID:??? そこは初心者スレであって制作依頼スレではないのではなくて? 質問者に学ぶ意志が全くないのなら、ランサーズとかに金出して依頼すべき案件に読める : Name_Not_Found [sage] 2017/03/17(金) 02:16:49.50ID:??? ソースコードを見ると、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プログラミング板やプログラム板よりも、 この板の方が、やっている人が多い : 271 [sage] 2017/03/17(金) 11:42:41.49ID:??? ここにアクセスして、返ってくるHTMLは、 ttp://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="" それらを連結すると、こうなる ttp://hanabi.2ch.net/test/read.cgi/wcomic/1438080242/102 2016/12/24 14:59:51.98 今は、jQuery.ajax で、複数のHTMLを取得する方法を、調べている : Name_Not_Found [sage] 2017/03/17(金) 14:35:02.88ID:??? 出力HTMLの仕様差を埋めるなら、datファイルをxhrまたはfetchで取得すればいいんじゃないかね 最も、質問者本人は作る気が全く無さそうだが : Name_Not_Found [] 2017/03/17(金) 22:57:01.22:OaN95QP/ まったくの初心者です。 お時間のある方、よろしければご教授願えますでしょうか。 if($(this).hasClass("mail")){ if($(this).val() && !$(this).val().match(/.+@.+\..+/g)){ $(this).parent().prepend("<p class='error'>メールアドレスの形式が異なります</p>"); } } if条件の&&前の$(this).val()は何を意味しているのでしょうか? メアドの形式判定なら&&以降だけで足りている気がしてしまいます。 : Name_Not_Found [sage] 2017/03/17(金) 23:19:38.07ID:??? $(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)の対象になる : Name_Not_Found [sage] 2017/03/17(金) 23:29:55.20ID:??? 説明不足で申し訳ありません。イベント部分はこうなっています $("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 で合っていますか? : Name_Not_Found [sage] 2017/03/17(金) 23:40:20.65ID:??? 回答者がアホ。無断なやり取りすんな。 単に未入力の時にエラーにしたくないだけだ : Name_Not_Found [sage] 2017/03/17(金) 23:46:59.14ID:??? if($(this).val()) で、$(this)に何らかの値が入っていると 条件を満たす ということでしょうか? : Name_Not_Found [sage] 2017/03/18(土) 00:09:44.49ID:??? そういうこと boolean型で評価される条件は一度確認しておいたほうが良い ttps://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean : Name_Not_Found [sage] 2017/03/18(土) 00:13:48.09ID:??? なるほど!trueが返ってきて条件成立、なのですね。 皆様ありがとうございました。とても助かりました。 : 271 [sage] 2017/03/18(土) 20:08:14.39ID:??? 複数のajax処理と、2chの返信から、DOMを構築して、 jQueryでデータを取り出す所を、今研究している 元のHTMLは、ajaxで2chへアクセスして、その返信をHTMLに表示するなど、なかなか凝っている。 こういうループ処理なら、AngularJSを使いたくなってくる 2chで、こういうツールを作れる人は、 プログラム板のVBScriptのスレ主である、ピラフだけかもw 1週間経っても、誰も作れない時は、ピラフに頼むしか無さそう : Name_Not_Found [sage] 2017/03/18(土) 20:16:00.18ID:??? 作るのは構わんが別のとこでやってくんね : Name_Not_Found [sage] 2017/03/19(日) 02:36:50.10ID:??? ピラフに頼んだからもういいよ : Name_Not_Found [sage] 2017/03/23(木) 21:26:07.17ID:??? 無名関数のfunction(){}ですが、この'function'を置き換えることってできますか? : Name_Not_Found [sage] 2017/03/23(木) 21:26:31.07ID:??? すいません、無名関数でなく、関数の宣言でした : Name_Not_Found [sage] 2017/03/23(木) 22:16:12.73ID:??? (()=>'hoge')() : 286 [sage] 2017/03/23(木) 22:16:51.76ID:??? すまん 省略じゃなくて置き換えるだったか : Name_Not_Found [sage] 2017/03/23(木) 22:28:59.86ID:??? いえ、短くする方法を知りたかったので、とてもありがたいです そんな記述方法があったのですね : Name_Not_Found [sage] 2017/03/23(木) 23:17:46.43ID:??? はっはっは、そのピラフってやつは無能だった 結局ピラフは作れなかったぞwww : Name_Not_Found [sage] 2017/03/23(木) 23:24:32.36ID:??? 作ろうと思えば作れる ・みんなが使うのが確定している ・共同開発 なら俺も手伝うわ 頑張って作って、数人が使うだけは辛い しかも2chって結構特殊なフォーマット何だよ。鯖によって変わる : Name_Not_Found [sage] 2017/03/24(金) 00:53:46.04ID:??? $って$(window)とは違うんですか? : 271 [] 2017/03/24(金) 01:25:31.51:Bn2SnBz0 プログラム技術板に、スレがある 2chの荒らし報告の書式対応のプログラム ttp://echo.2ch.net/test/read.cgi/tech/1480669386/l50 ちなみに今、漏れは、途中まで作っているよ。 出来なければ、ピラフに頼むつもり ttp://〜/〜/1-1000 今、入力URLの、1-1000 のrange、または、1など単独数字の、入力チェック部分を作っている ただ、その例には、<div class="number"> タグしかないから、 <dt> タグを使っているHTMLには、対応できないよ : Name_Not_Found [sage] 2017/03/24(金) 05:55:30.13ID:??? WEB+DB vol.97 の特集が、React WEB+DB vol.94 の特集が、Kotlin, Electron : Name_Not_Found [sage] 2017/03/24(金) 20:55:00.60ID:??? ttp://semooh.jp/jquery/api/core/jQuery/expression%2C+context/ jquery()の第二引数、contextってどういう風に使うものなんでしょうか 絞り込み? $('body',$('html')) これでbodyが返ってきますが $('html body') でいいような気がします : Name_Not_Found [sage] 2017/03/24(金) 21:18:47.29ID:??? すでにピラフに頼んだんだろ?無視されてるけどw VBScriptについて必死に話し合うスレ [転載禁止](c)2ch.net ttp://echo.2ch.net/test/read.cgi/tech/1416826139/809 : Name_Not_Found [sage] 2017/03/24(金) 23:09:53.36ID:??? var $html = $('html'); $('body',$html); //$html.find('body'); $('div',$html); $('a',$html); : 271 [sage] 2017/03/25(土) 03:39:22.59ID:??? jQuery(expression, context)で、context を指定すれば、 その子孫だけを探索するから、速い。 contextより上の階層を、探索しない もし、contextより上の階層が更新されているなら、 最上位のbodyから探索すべきだけど ttp://〜/〜/1-1000 入力URLの、1-1000 のrange、または、1など単独数字の、 最もややこしい、入力チェック部分の目途がついたから、 ピラフに頼むのは、もう少し後にする : Name_Not_Found [sage] 2017/03/25(土) 08:41:56.83ID:??? ,297 なるほど、絞り込む分処理が早くなるんですね ありがとうございました : Name_Not_Found [] 2017/03/26(日) 23:29:17.28:6XjROwuH カラーボックスと問い合わせフォームを一緒に使おうと思うのですが、jqueryの読み込みが重なるのかよくわかりませんが、 同一ページにタグがあると正常に動きません。 カラーボックス <script src=" ttp://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 問い合わせフォーム <script type="text/javascript" src=" ttps://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 問い合わせフォームのタグを消せばカラーボックスが動くことは確認しましたが、 ここからどうしたら良いのかわかりません。 カラーボックスはこちらのもの ttp://www.jacklmoore.com/colorbox/example2/ 問い合わせフォームはこちらのものです ttps://www.1-firststep.com/archives/462 : Name_Not_Found [sage] 2017/03/26(日) 23:35:08.12ID:??? このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。 jQueryを使って作る側のスレであって、こんなプラグインありませんか?と聞くスレではありません。 そういうのは自分で探してください。 ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。 : Name_Not_Found [sage] 2017/03/26(日) 23:38:17.17ID:??? jQueryでcssを指定する時、css自体を触るのではなく 予め設定しておいたclassを付け外しするほうが良いと思いますが、こういう方法の指針などはありますか? : Name_Not_Found [sage] 2017/03/26(日) 23:50:34.15ID:??? それjQueryに限らないからなぁ : Name_Not_Found [sage] 2017/03/26(日) 23:51:48.98ID:??? なるほど、確かにそうですね もうちょっと勉強してきます : Name_Not_Found [] 2017/03/27(月) 00:02:07.96:kYFWTYX4 299ですが、私に対してでしょうか。 全く理解できていないので。 : Name_Not_Found [sage] 2017/03/27(月) 00:07:46.63ID:??? ここは「jQueryの使い方」の質問スレ 「jQueryで作られたもの」は知ったこっちゃない 分からないならサポートに聞くと良い 個人的には色々いじるんじゃなく、 ・カラーボックスを使わない ・カラーボックスの部分はちゃんと勉強する で、すぐに解決すると思う : Name_Not_Found [] 2017/03/27(月) 00:10:00.32:kYFWTYX4 そうなんですね 失礼しました : 271 [sage] 2017/03/27(月) 04:24:45.70ID:??? VBScriptについて必死に話し合うスレ ttp://echo.5ch.net/test/read.cgi/tech/1416826139/832- ">ttp://echo.2ch.net/test/read.cgi/tech/1416826139/832- こらこら団のアプリは、プログラム板のこのスレで開発中。 ピラフも、どうやら興味を持ってくれたようだw : Name_Not_Found [sage] 2017/03/27(月) 06:00:19.46ID:??? 全く興味ないんで勝手に向こうでやっててくれ : Name_Not_Found [sage] 2017/03/28(火) 01:32:18.01ID:??? くすくすくす。あ、ここでやんなよ。向こうでやれ ttp://echo.2ch.net/test/read.cgi/tech/1416826139/840 VBScriptについて必死に話し合うスレ [転載禁止]c2ch.net 840 : ピラフ ◆9Jro6YFwm650 2017/03/27(月) 20:10:57.30 ID:bt96dW+y やろうと思ったけど何をやればいいのかわからなかった ピラフあきらめた! : Name_Not_Found [sage] 2017/03/28(火) 20:54:28.90ID:??? テキストボックスでユーザが入力できることに加え、 別の操作で値を自動入力することを考えています。 あるボタンを押すとテキストボックスに値が入る仕組みです。 <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にする(反映させる)にはどうしたらいいでしょうか? : Name_Not_Found [sage] 2017/03/28(火) 21:09:18.99ID:??? 失礼、勘違いでした。 ここは変わらないものなのですね(たぶん) : Name_Not_Found [sage] 2017/03/28(火) 21:27:37.85ID:??? おー、それは知らなかった、というか気にしたことなかった それは変わらないものだね。愛だね。 $(foo).attrなどで変えることも出来るけど、特に意味は無いかな : Name_Not_Found [sage] 2017/03/28(火) 21:29:46.11ID:??? フォームの値については、HTMLに書いてあるものは初期値と考えればいい。 フォームの値をいくら変えたとしても、HTML自体は変わらない。 HTMLを書き換えたいのであれば、HTMLを書き換える命令を使う(attr()とか) : Name_Not_Found [sage] 2017/03/29(水) 08:38:20.71ID:??? <div> <div id="div1"> <div id="div2"></div> </div> </div> <div> <p></p> </div> たとえばこんな場合に、div1から後方に探索して、最初に現れる<p>を求めたいのですが、どうすれば良いでしょか? もしdiv1やdiv2にも<p>が有る場合にはそちらを検出したいのです。 : Name_Not_Found [sage] 2017/03/29(水) 13:03:22.85ID:??? has、子孫セレクタ、グループ化を組合せて3つのパターンを列挙してやればインデックス0がそれ : Name_Not_Found [sage] 2017/03/29(水) 19:52:02.64ID:??? <p id="hoge" zoku="abc">テキスト</p> $('#hoge').text('てきすと'); $('#hoge').attr('zoku', 'def'); で、ツールで見ると「てきすと」と「def」に即変わるのでてっきりvalueも変わるもんかと というかあまり考えてませんでした。デバグ中にたまたま気がつきまして、あれ?っと。 それが変わらないのが違和感あるなと思いつつ、ユーザ入力の部分が変わるのもそれはそれで違和感ありますが。 お騒がせしました。 : Name_Not_Found [sage] 2017/03/29(水) 20:15:45.54ID:??? $('p').first(); ただし他のpも検索されるので、の全てを<div id="div0">で囲って $('div0').find('p').first(); ただしdiv1の外も検索されるので、 pにクラス付けた方が楽かも : Name_Not_Found [sage] 2017/03/29(水) 21:41:55.73ID:??? タグに書いてあるのは属性なんだよ。 属性っていうのはattrでしか変えられない。 属性と値は違うものなんだよ。 : Name_Not_Found [sage] 2017/03/29(水) 23:30:07.46ID:??? >タグに書いてあるのは属性 その言い方だとvalue=""も属性となるな : Name_Not_Found [sage] 2017/03/30(木) 00:32:24.74ID:??? その通り。HTMLのinputタグのvalue=""は属性 そのHTMLをパースして表示されたインプット要素の値は属性ではない。 ブラウザでキーボードを叩いてインプット要素の文字を変更したとしても、 属性には反映されない : Name_Not_Found [sage] 2017/03/30(木) 01:09:39.99ID:??? 順序がおかしい。デバグ中にたまたま・・・ってところは気にした方がいいよ。 Firebugか、ChromeのコンソールでDOM見ながらスクリプト書いてる? jQuery読んでるページでそのまま記述して実行すればリアルタイムで確認しながら見れる。 コンソールに書き出すのも最初はいいけど、breakpoint決めて、要素を選んでHTMLの状態を確認できるようにするといいよ。 : Name_Not_Found [sage] 2017/03/30(木) 08:17:18.40ID:??? classもIDも属性なんだよな この辺うまく認識してないと思わぬところでミスが起きる : Name_Not_Found [sage] 2017/03/30(木) 11:53:41.68ID:??? 【attribute】 西洋美術において伝説上・歴史上の人物または神話上の神と関連付けられた持ち物。その物の持ち主を特定する役割を果たす。 : Name_Not_Found [sage] 2017/03/30(木) 21:10:09.05ID:??? 今回の件は見なくても問題なくスラスラ書けてますし、把握してるので特に必要にならない限り見ませんね。 別件で引っかかって確認してたらその辺に行き着きつきまして。 >jQuery読んでる〜 やってます。 attrやdataはけっこう使い込んでるのでvalueの件は勘違いでした。 : Name_Not_Found [sage] 2017/03/30(木) 22:26:24.00ID:??? 上から目線で基本的なこと説明してるのがいるが最初の人のほうが詳しいキガス : Name_Not_Found [sage] 2017/04/01(土) 21:29:37.28ID:??? addClassの類も変わるよ : Name_Not_Found [sage] 2017/04/02(日) 01:54:53.87ID:??? ツールで値が変わるか否かなのでそもそもは的違いだな ttp://www.jquerystudy.info/reference/attributes/val.html : Name_Not_Found [sage] 2017/04/02(日) 12:37:12.73ID:??? >属性っていうのはattrでしか変えられない。 これが自分で書いてる他の部分と矛盾している 属性とはHTMLでいうものとattrそのものの2種類ある この辺うまく認識してないと思わぬところでミスが起きる : 4days ◆6xK9k12f2U [] 2017/04/02(日) 19:59:12.66:plhk8IBH ありがとうございます! すいません、近頃ビットコインの値動きが激しくてここを全く見てませんでした ここまで心臓部が出来てたんですね ttp://echo.2ch.net/test/read.cgi/tech/1416826139/851 助かります 以降はリンク先をウォッチさせていただきます : Name_Not_Found [sage] 2017/04/06(木) 20:03:59.22ID:??? は質問しといてスルーか : Name_Not_Found [sage] 2017/04/07(金) 03:44:34.97ID:??? これは、ちょっとしたパズルだな >もしdiv1やdiv2にも<p>が有る場合には、そちらを検出したい 確か、jQueryの探索順序は、深さ優先探索だったかな? まず最上位から、すべてのタグを探索すると、タグの配列が、深さ優先で、 0,1,2 〜 999,1000 と並ぶ この配列の先頭から、<div id="div1"> を探す。 その次から、<p>を探す : 271 [sage] 2017/04/07(金) 08:32:48.65ID:??? ローカルPCにHTMLと、以下のJSファイルを置いて、 Win10, Edge からJSONP で、2chにアクセスして、HTMLを取得しようとしているけど、 callback関数が呼ばれないというエラーになる HTMLは文字化けしているけど、取得できている。 2chはSJISなので ローカルに、サーバーを立てていないからなのかな? var url = "ttp://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) { }); : 271 [sage] 2017/04/07(金) 09:00:09.72ID:??? 332の続き HTMLは文字化けしているけど、取得できている。 2chはSJISなので。 xhr.status は200 だから別に、callback関数は必要ない。 fail じゃなくて、done になってくれれば、data が取得できるのだが : 271 [sage] 2017/04/07(金) 11:15:34.07ID:??? ブラウザからのクロスドメインは難しいから、 YQL (Yahoo! Query Language)のサービスを使って、クロスドメインを可能にする、 jquery.xdomainajax.js プラグインを、試してみようと思う こらこら団報告書生成 ttp://hotmilk350ml.web.fc2.com/korakorashot.html 元々、このツールでも、このプラグインを使っているし でも、世界中の人が、YQLを使ったら、どうなるんだろう。 2chでもYQLを、アクセス禁止にするかも知れない : 331 [sage] 2017/04/07(金) 13:03:39.42ID:??? を修正 すべてのタグを探索しなくても良い 最上位から、すべての<p> or <div>(または<div id="div1">)を探索して、 <div id="div1">を探す。 そして、その次の<p>を探す : Name_Not_Found [sage] 2017/04/07(金) 19:19:25.57ID:??? それは使わない方が良い : Name_Not_Found [sage] 2017/04/07(金) 22:18:36.75ID:??? で答えがでているものを小難しく考えて持論を長々と書くのは止めてくれ : Name_Not_Found [sage] 2017/04/07(金) 23:25:26.80ID:??? 別件で今更jQueryのajaxについて調べる必要が出たから、 あとでちゃんと調べることになるけど、今はめんどくさいので うろ覚えで答える。 あんた、jsonとjsonpを勘違いしてるだろう? jsonはJSON形式の文字列を返すものであるが、 jsonpはJSONを引数にして関数を呼び出す "コード" を返さないといけない。 デフォルトの関数名はcallback。 つまり以下のようなコードを返す必要がある。 callback( {"num":[1,2,3], "abc":["a","b","c"]} ); そうすると、あんたがソースコードに定義してるはずの callback関数が呼び出される。 > だから別に、callback関数は必要ない。 jsonpを使用している以上、あんたはcallback関数を定義しなければいけないし、 サーバー側からはcallback関数を呼び出すコードを返さないといけない。 jsonpを使用している限りcallback関数は絶対に必要 : 331 [sage] 2017/04/08(土) 02:32:03.09ID:??? $.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では、クロスドメインで苦労する : 271 [sage] 2017/04/08(土) 06:21:10.18ID:??? 名前欄の331は、271の間違い まあ、同一人物だけどなw : Name_Not_Found [sage] 2017/04/08(土) 07:54:15.52ID:??? NGに入れるから統一してくれ : Name_Not_Found [sage] 2017/04/08(土) 10:22:35.09ID:??? の内容を少しだけ修正する あんた、jsonとjsonpを勘違いしてるだろう? jsonはJSON形式の文字列を返すものであるが、 jsonpはJSONを引数にして関数を呼び出す "コード" を返さないといけない。 デフォルトの関数名はcallback。 つまり以下のようなコードを返す必要がある。 callback( {"num":[1,2,3], "abc":["a","b","c"]} ); そうすると、jQueryが用意してくれているcallback関数が呼び出される。 > だから別に、callback関数は必要ない。 jsonpを使用している以上、内部でcallback関数が使われるので サーバー側からはcallback関数を呼び出すコードを返さないといけない。 jsonpを使用している限りcallback関数は絶対に必要 : Name_Not_Found [sage] 2017/04/08(土) 13:05:55.93ID:??? 通りすがりですが jsonpからcallback()の部分を消せばjsonになると思っていいですか? : Name_Not_Found [sage] 2017/04/08(土) 13:06:14.58ID:??? サーバー側からJSONPを返してないのに JSONPが使えるわけ無いだろう 馬鹿か : Name_Not_Found [sage] 2017/04/08(土) 22:03:19.31ID:??? ブラウザ環境では、JSでクロスドメインできない。 でも、HTML内で、 <script type="text/javascript" src="http://なんとか/aaa.js"></script> のように、<script>タグを使えば、クロスドメインできる だから、それを応用して、HTML内に動的に、<script>タグを作って、 アクセスする技術が、jsonp : Name_Not_Found [sage] 2017/04/08(土) 22:35:08.30ID:??? ブラウザ環境() : Name_Not_Found [sage] 2017/04/08(土) 23:17:56.90ID:??? JSONPみたいなダサいハックをいったい何年放置する気なんだWeb系の連中は : Name_Not_Found [sage] 2017/04/09(日) 00:01:27.63ID:??? も小難しく考えすぎだがな : Name_Not_Found [sage] 2017/04/09(日) 03:23:39.95ID:??? > ブラウザ環境では、JSでクロスドメインできない。 できる > JSONPみたいなダサいハックをいったい何年放置する気なんだWeb系の連中は 7年ぐらい前に解決済み 年取ると、時間の流れが早いよねw : Name_Not_Found [sage] 2017/04/09(日) 10:13:27.68ID:??? どの辺が? もっと簡単な方法があるならコードを書いてみて : Name_Not_Found [sage] 2017/04/09(日) 22:14:50.59ID:??? なんで読もうとしないんだろ : Name_Not_Found [sage] 2017/04/09(日) 22:22:07.98ID:??? 論理的な思考ができない人には無理 : Name_Not_Found [sage] 2017/04/09(日) 22:59:18.00ID:??? 読んだ上でが一番簡単だと思った俺は異端なんかな? 長文書いてる奴は1行でかける事を何を難しく考えてるんだ、と思ってた : Name_Not_Found [sage] 2017/04/09(日) 23:02:53.99ID:??? まぁでもコードでバシっと書けないところがカッコ悪いんだよ 「おれ絵めっちゃ上手いぜ」 「へぇじゃあ描いてみて」 「こうやってああやって描けばいいんだよ」 「ん?描いてみて」 「・・・」 なんだわ : Name_Not_Found [sage] 2017/04/09(日) 23:44:02.44ID:??? 論点がずれてるよ 「小難しい」と指摘された回答が「小難しくない」から反論されてるんでしょ 「小難しい」といった人が小難しい理由を書くべきだよ 小難しくないコードを出せ、というのも筋は通ってる : Name_Not_Found [sage] 2017/04/09(日) 23:47:50.99ID:??? 難しいのがコードの問題なのか、人間の問題なのかを 見極める必要がある。 人間の問題、つまり(俺にとって)難しいとか言い始めたら そんなのは無視した方がいい。 漢字読めない俺は難しいからひらがなで書けと 言ってるのと同じだから 高い技術を持った人が、そのコードは簡単というのであれば それは人ではなくコードが簡単だと言えるだろう。 簡単なコードを読めるには技術が必要ってだけだ : Name_Not_Found [sage] 2017/04/09(日) 23:51:47.18ID:??? 無駄に長い長文だな もうお互いにコードを出して第三者に評価してもらえばいいんじゃないの? : Name_Not_Found [sage] 2017/04/10(月) 00:00:44.19ID:??? あとでごちゃごちゃならないように、 良いコードの条件を言っておくわ 1. 「(俺が・初心者が)読めない」は理由にならない 2. 単語の長さは関係ない 3. 条件文が少ない。 4. ループが少ない。 5. 行数が少ない(ただし; で無理やりつなげたり、横100文字を超えるのはダメ) 6. 重複する単語やコードが少ない : 315 [] 2017/04/10(月) 00:03:00.50:bxUtMTpP jQuery('#div1 p,#div1+p,:has( #div1) p,:has( #div1)+p,:has( #div1)+p')[0]; ttps://jsfiddle.net/eyg016m2/ あなたが小難しくないと思うコードを是非教えてくれ : Name_Not_Found [sage] 2017/04/10(月) 00:05:01.02ID:??? 一つ追加 なるべく少ない単語を使用する(複合語にしないということ) : Name_Not_Found [sage] 2017/04/10(月) 00:06:08.94ID:??? 条件を書く暇があるならコードを書け : 315 [] 2017/04/10(月) 00:11:57.89:bxUtMTpP 重複したセレクタを削除した jQuery('#div1 p,#div1+p,:has( #div1) p,:has( #div1)+p')[0]; ttps://jsfiddle.net/eyg016m2/1/ : Name_Not_Found [sage] 2017/04/10(月) 00:14:56.57ID:??? お前が書いたコード '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)); : 315 [] 2017/04/10(月) 00:22:51.17:bxUtMTpP 後で扱いやすいように変数化しただけだから好きに改変してくれ jQuery or $ もポリシーでどうとでも変わる程度の違い それはともかく、が小難しいといった人が書いたコードを早く見てみたいのだが : Name_Not_Found [sage] 2017/04/10(月) 00:34:32.66ID:??? $を使わずjQueryを使う人は、JavaScriptに慣れてない人だと思う。 ローカルスコープがよく分かってないんじゃないかな。 以下のように書けば、$はかならずjQueryになることが保証されるので いちいち長い単語を使う必要がなくなる。 jQuery(function($) { ・・・ } (function($) { ・・・ }(jQuery)); : Name_Not_Found [sage] 2017/04/10(月) 00:36:49.84ID:??? 本題とは関係ないところに反応して何がしたいんだ? $('#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 [] 2017/04/10(月) 00:39:49.46:bxUtMTpP 悪いが、両方とも知っている jQuery を使用するのは検索性/可読性の観点からであって「$ をローカルスコープに閉じ込める方法を知らないから」ではない が指摘するように「単語の長さは関係ない」 : Name_Not_Found [sage] 2017/04/10(月) 00:48:19.28ID:??? $で検索性も可読性も落ちてないけど? : Name_Not_Found [sage] 2017/04/10(月) 00:49:58.51ID:??? 単語の長さは関係ない。 だからこそ長いほうが可読性が高いわけじゃない。 : Name_Not_Found [sage] 2017/04/10(月) 00:52:00.55ID:??? 結局、のどこが小難しいんですかね? : 315 [] 2017/04/10(月) 00:59:18.63:bxUtMTpP "$" でgrep検索すると正規表現にもマッチしてしまうが、"jQuery" でgrep検索すれば jQuery だけが期待通りにマッチする 可読性は人それぞれ違うものなのでそこを議論するつもりはない 各々が読みやすい方を選択すれば良いわけで、言い換えれば、「あなたが好きな方を他人に強制する事」は出来ない 本題から逸れすぎているのでいい加減、話題を「を実装する場合の小難しくないコード」に戻してくれ が小難しいというならの論理に沿ったコードも小難しいという事だ あなたがたが書いたコードを俺のコードを元に作っているのだから、それも小難しいコードという事になる では、小難しくないコードとは何なのだ? 俺はコードを出したのだから、そちらもコードを出してほしいのだがな : Name_Not_Found [sage] 2017/04/10(月) 01:04:00.98ID:??? > "$" でgrep検索すると正規表現にもマッチしてしまうが、 エスケープすればいいだけじゃね? : Name_Not_Found [sage] 2017/04/10(月) 01:04:51.46ID:??? > 可読性は人それぞれ違うものなので それは間違い。 人それぞれ違うものを"可読性"と言ってはいけない : Name_Not_Found [sage] 2017/04/10(月) 01:08:18.50ID:??? 君は問題の本質を理解していない /hoge$/ という文字列にも $("p") という文字列にも "$" で検索してHITしてしまうのが問題 /hoge$/ にはマッチさせたくない場合にはどうやって正規表現を書くかね? : Name_Not_Found [sage] 2017/04/10(月) 01:12:57.44ID:??? \$\( で良いんじゃね? 頭固いのかな? : Name_Not_Found [sage] 2017/04/10(月) 01:13:45.65ID:??? 関係ないかもしれんが別の意味の$がマッチしてうざいときは$(とか$.で検索してるは : Name_Not_Found [sage] 2017/04/10(月) 01:16:16.59ID:??? では、jQuery.each や jQuery(function ($) {}) にはどうやってまっちするかね? コード内の全ての jQuery を参照する $ を検索することが出来るかね? : Name_Not_Found [sage] 2017/04/10(月) 01:18:50.82ID:??? それは、jQueryで検索すればよかろう? > コード内の全ての jQuery を参照する $ を検索することが出来るかね? できるんじゃねーの? お前が出来ないって思って出したはずのものを 今ことごとく論破したでしょw : Name_Not_Found [sage] 2017/04/10(月) 01:20:24.89ID:??? ちなみに、jQuery.eachとは書かない。 $.eachと書く。その検索方法はが言ってる通り : 315 [] 2017/04/10(月) 01:20:31.07:bxUtMTpP 可読性は主観だ あえていうならば、「jQuery の方が jQuery である事を明示的に表しているから」だがね それは主観的な問題で $ と jQuery の可読性が高いなんて誰にも断定できないだろう? 先程から枝葉にしか反論が来ないようだな 反論がなければ、「315が小難しい理由はない」と判断する : Name_Not_Found [sage] 2017/04/10(月) 01:21:10.37ID:??? > 可読性は主観だ だから主観ではない。 : Name_Not_Found [sage] 2017/04/10(月) 01:22:51.70ID:??? > それは主観的な問題で $ と jQuery の可読性が高いなんて誰にも断定できないだろう? 「単語の長さは関係ない」の通り、可読性と単語の長さは関係無い 可読性の話じゃないんだから、どちらが高いか断定できないのは当たり前だろ : Name_Not_Found [sage] 2017/04/10(月) 01:24:59.31ID:??? jQueryよりも$を俺がすすめるのは、 タイプするのが楽だからだ。 もう一回言うぞ? タイプするのが楽だからだ。 書く時の話であって、読みやすい(可 "読" 性)とは言っていない。 可読性に関係ない = 可読性に違いがないのであれば タイプするほうが楽な方が良いだろ? : Name_Not_Found [sage] 2017/04/10(月) 01:27:30.24ID:??? それなら、「単語の長さは関係ない」から「単語の長さは短い方がいい」に訂正しろよ 変数名も1文字だけ使えよ : Name_Not_Found [sage] 2017/04/10(月) 01:29:23.69ID:??? 1文字の変数名ってすげー読みにくい 可読性は主観ではないらしいから他の皆も読みにくいんだろうな 読みにくい書き方をする理由がタイプ数が少ないだけなら俺にはメリットがないな : 315 [] 2017/04/10(月) 01:32:13.97:bxUtMTpP 本題()を無視してどうでもいい枝葉にしか反論がないのは何故なんだ? アホらしくなってきた : Name_Not_Found [sage] 2017/04/10(月) 01:32:38.85ID:??? > 「単語の長さは短い方がいい」に訂正しろよ 訂正しない。短い方がいいとは限らないからだ。 短いか長いかは関係なく、それがそのコードを書く人(修正する人)にとって よく知られている単語(新参者にとっては知るべき単語)かどうかだ。 $はjQueryのコードを書く人にとってよく使われている単語で $を知らずして、jQueryのサンプルコードを読むことは出来ない。 だから明らかに、jQueryのコードを書く人は$の意味を知っている。 だから、前提をつけて「よく知られている単語の場合は短い方がいい」となるが それはあくまでタイプするのが楽であるという意味であって、可読性の話ではない : Name_Not_Found [sage] 2017/04/10(月) 01:33:54.85ID:??? 単語の長さは関係ないと言ってるのに、 長い方がいい、短いほうが良いと、決めつけたがるんだよなw ほんとバカやで : Name_Not_Found [sage] 2017/04/10(月) 01:36:54.40ID:??? 「長い方がいい」とは誰も言ってないがな : Name_Not_Found [sage] 2017/04/10(月) 01:41:31.25ID:??? 略よりも長いほうが明示的だと思ったんだろう? 正確に言うならば、$は略ではなく短い別名だが。 可読性で重要なのは意味がわかるかどうかであって 言い換えると誰でもその単語の意味を知っているか? という話なんだよ。 : Name_Not_Found [sage] 2017/04/10(月) 01:47:44.79ID:??? 略称がいいか正式名称がいいかの違いに標準を求めるのが間違ってる : Name_Not_Found [sage] 2017/04/10(月) 01:48:41.47ID:??? 標準を求めるってなんのことだ? (単語の長さに関係なく)よく知られている単語か、 そうでないかの話しかしてないぞ : Name_Not_Found [sage] 2017/04/10(月) 01:50:20.11ID:??? 知ったうえでどちらを使うかは自由だろ お前が主張する「単語の意味を知っているか」は知っているなら$を使うはずだ、といいたいんじゃないのか? : Name_Not_Found [sage] 2017/04/10(月) 01:51:56.62ID:??? どちらでもいいのであれば、 タイプが短いほうが楽だろう? : Name_Not_Found [sage] 2017/04/10(月) 01:53:19.57ID:??? それがお前の中で「標準を決めている」といってるんだよ タイプ数が重要じゃない人の事も考えろ : Name_Not_Found [sage] 2017/04/10(月) 01:53:56.57ID:??? タイプ数しか違いがない問題なのに、 何をお前は基準にしてるのだ? : Name_Not_Found [sage] 2017/04/10(月) 01:56:16.82ID:??? 検索性と誰が見ても分かる分かりやすさ : Name_Not_Found [sage] 2017/04/10(月) 01:58:18.88ID:??? 検索性は変わらないことを実例を持って示した。 jQueryのコードをメンテナンスする人で$を知らない人はありえない。 : Name_Not_Found [sage] 2017/04/10(月) 02:00:10.93ID:??? 「優先順位の違い」とか「単語の好みの違い」とか、いろいろあると思うけどな JSと略する事を嫌ってJavaScriptと正式名称を書きたがる人もいれば、短く書くことをの好む人もいる : Name_Not_Found [sage] 2017/04/10(月) 02:06:09.41ID:??? 例えば、var a = $; なんてコードに先の事例はマッチしないよな 揚げ足取りじゃなくて俺は「全てのパターンで $ を検索可能か」で考える jQuery なら少なくとも$よりも正確に検索できる 「分かりやすさ」は知っているか知らないかの問題じゃない 整数型の変数を定義する場合に i と integer のどちらを採用するか、レベルのもの それから、俺にとってはタイプ数は「どうでもいい」 : Name_Not_Found [sage] 2017/04/10(月) 02:13:17.97ID:??? それは揚げ足取りだなw 自分でそう思ってるから、否定するんだろ $で検索すれば全部見つけることが可能。 余計なものが多すぎるなら、grep -v ででも消せばいい はい論破w : Name_Not_Found [sage] 2017/04/10(月) 02:15:21.11ID:??? > 整数型の変数を定義する場合に i と integer のどちらを採用するか、レベルのもの え? お前、みんながiを使うような緒齧ハで、 integerって名前の変数を定義するんの?w iはイテレータとしてよく知られているか単語だから みんなiを使うんだよ? : Name_Not_Found [sage] 2017/04/10(月) 02:20:07.36ID:??? 検索性は高い方が好ましい jQueryが$よりも検索性が高い事は誰にも否定できない お前とは評価基準が違うだけなんだが、唯我独尊な奴だな : Name_Not_Found [sage] 2017/04/10(月) 02:23:31.70ID:??? > jQueryが$よりも検索性が高い事は誰にも否定できない さっきからずっと否定しているが? っていうか、そこまで検索に頼るっておかしくね? どこに何がわからないから検索してるんだろ? 設計レベルでおかしいってことだよ。 jQueryはDOM操作をしている所と言い換えることができるが、 俺は「DOM操作をしている所」という条件で検索することは殆ど無い。 検索するとしたら特定の変数名やクラス名で検索する。 : Name_Not_Found [sage] 2017/04/10(月) 02:25:25.38ID:??? いや、こう書いても意味がわからんか? 変数名iはイテレータの略としてあちこちで使われるが、 変数名iで検索することはないだろう? 変数名iを検索の目的として選ぶことはないから。 それと一緒だよ。 jQueryという単語を検索したいなんてことはまずない : Name_Not_Found [sage] 2017/04/10(月) 02:36:10.20ID:??? この人は思い込みが強すぎて他人の意見を正しく理解できないんだな 無駄に改行を入れて冗長な文章になってるのもマイナス : Name_Not_Found [sage] 2017/04/10(月) 02:51:36.60ID:??? ↑何も意味があることを言ってないねw : Name_Not_Found [sage] 2017/04/10(月) 03:58:34.82ID:??? JSスレで散々見た流れだな 1. 回答をけなす 2. コード付で反論される 3. 初めにけなした内容では論破できないので、「取っつきやすそうな理由」を見つけてけなす けなす内容は何でもいい 本題から大幅にずれても関係ない とにかく、相手を論破出来れば何でもいい : Name_Not_Found [sage] 2017/04/10(月) 04:47:52.81ID:??? 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() ); } }); : Name_Not_Found [sage] 2017/04/10(月) 07:13:52.51ID:??? ループ変数iって読みにくくない? そこもキッチリ名前を付けたほうが読みやすいよ : Name_Not_Found [sage] 2017/04/10(月) 08:52:22.38ID:??? ループ変数名よりブロックの長さやネストの深さの方が問題 そこがちゃんとしてればijkでなんの問題もない : Name_Not_Found [sage] 2017/04/10(月) 08:56:40.42ID:??? iは分かるけどjは絶対止めたほうがいい。普通に読み間違える 使うのはいつもikmだわ : Name_Not_Found [sage] 2017/04/10(月) 11:52:58.55ID:??? ループ変数の話に持っていくお前がアホ : Name_Not_Found [sage] 2017/04/10(月) 14:09:55.87ID:??? ふざけないで わがまますぎる : 315 [] 2017/04/10(月) 23:31:23.84:jsJasTuY 結局、出たコードはだけで「315が小難しい理由」は分からず仕舞いか 時間の無駄だったな : Name_Not_Found [sage] 2017/04/11(火) 00:29:31.74ID:??? 蓋を開けてみれば、315のコードが圧倒的にシンプルで文句のつけようがなかった : Name_Not_Found [sage] 2017/04/11(火) 00:31:21.66ID:??? だいたいいつも男なんて 甘ったれで情けなくて : Name_Not_Found [sage] 2017/04/11(火) 00:37:19.67ID:??? 文句つけてる奴の持論が稚拙すぎて哀れだった : Name_Not_Found [sage] 2017/04/11(火) 01:59:39.39ID:??? どうして前後を読まないの? : Name_Not_Found [sage] 2017/04/11(火) 03:43:00.99ID:??? 315のコードに少し手を加えた程度のコードだからだろうよ : Name_Not_Found [sage] 2017/04/11(火) 04:06:23.30ID:??? それもあるけど、の文章を否定する具体的な意見が一つも出てないからだと思うな : Name_Not_Found [sage] 2017/04/11(火) 14:32:35.35ID:??? あえて否定するなら、のいう「3つのパターン」が「4つのパターン()」だったぐらいか。 とはいえ、それもケアレスミスレベルで「小難しい」と断定するには程遠い。 : Name_Not_Found [sage] 2017/04/11(火) 15:59:14.15ID:??? の要望ならこれでいいじゃねえの? $('div').each(function(index, el) { var $p = $(this).children('p'); if (!$p.length) { return; } console.log($p.eq(0)[0]); }); : Name_Not_Found [sage] 2017/04/11(火) 17:29:18.63ID:??? #div1 はどこへ行った? それから、ではdiv要素しか使ってないが、条件は「#div1の後方」であってp要素の親がdiv要素とは限らないんだが いずれにしても、よりシンプルに書くのは不可能な気がする : Name_Not_Found [] 2017/04/11(火) 18:53:36.85:PcuozJEw :has(何か) p って body 内の p 全部にヒットしない? : Name_Not_Found [sage] 2017/04/11(火) 19:25:24.35ID:??? 「何か」の制約を受けるのでそんな事はない。 疑問に思ったことは自分で確かめろ。 : Name_Not_Found [sage] 2017/04/11(火) 19:56:50.45ID:??? console.log($(this).closest('div')[0], $p.eq(0)[0]); これでどのdivの中のpなのかが参照できるだろ? : Name_Not_Found [sage] 2017/04/11(火) 20:52:39.95ID:??? 君は要件を勘違いしている の「div1から後方に探索して、最初に現れる<p>」を読め 「div」じゃなくて「div1」と書いてあるのは分かるか? 君のコードは無関係な要素にマッチする ttps://jsfiddle.net/4majn0vf/ : Name_Not_Found [sage] 2017/04/12(水) 08:19:53.21ID:??? あるIDから深さ優先で、後方に探索して、最初に現れる<p>を取得せよ このクイズを採用時のテストにすれば、ほとんど正解者はいないような気がする : Name_Not_Found [sage] 2017/04/12(水) 08:29:01.54ID:??? は TreeWalker とやらを使えば簡単そうだが (jQuery その手のやつはないのかな) : Name_Not_Found [sage] 2017/04/12(水) 08:51:11.20ID:??? $("p")を取得 .each()でそれぞれのparentsの数を数える。最も深い深度を取得 forで最後から回して最も深度のの中から最初に現れたものを取得 スマートさの欠片もないけど、楽勝だぞ : Name_Not_Found [sage] 2017/04/12(水) 13:48:26.55ID:??? の target3, target4, target5 にはどうマッチさせる? : Name_Not_Found [sage] 2017/04/12(水) 13:57:19.67ID:??? 可能だが、4パターンのコードを書く必要があるので、君が簡単と感じるかどうかは分からんぞ : 315 [] 2017/04/12(水) 14:44:10.07:z5iGcCzP は無関係な要素にマッチする事が発覚したので修正 ttps://jsfiddle.net/eyg016m2/4/ しかし、今の今までこの事実に気が付いて指摘した人が一人もいないとは… : 315 [] 2017/04/12(水) 15:01:27.91:z5iGcCzP はコメントがおかしかったので修正( <p>not target1</p> -> <p>target1</p>) ttp://https://jsfiddle.net/eyg016m2/5/ "> ttps://jsfiddle.net/eyg016m2/5/ ちなみに、 ttps://jsfiddle.net/ayktj45t/1/ 他で要件を満たしているコードはない : 315 [] 2017/04/12(水) 15:30:23.49:z5iGcCzP TreeWalkerはjQuery APIに存在しないと思うが、フィルタ的な意味ではjQuery#filterが近いといえなくもない TreeWalkerを使う場合、Element#matchesを使えば多少は楽になるが、肝心の :has() の実装が壊滅的なので親要素の探索が手間になる ttp://http://caniuse.com/#feat=matchesselector "> ttp://caniuse.com/#feat=matchesselector ttp://caniuse.com/#feat=css-has jQuery#is を併用すれば楽が出来るが、 ttps://jsfiddle.net/8yLzfzud/ : Name_Not_Found [sage] 2017/04/12(水) 16:42:25.78ID:??? 変なコードを書かなければいけないような構造にしなければいい : Name_Not_Found [sage] 2017/04/12(水) 16:49:36.91ID:??? お疲れ、はjQueryでfindIndexを使えれば割と簡単に書けるよな ttps://jsfiddle.net/ayktj45t/2/ : Name_Not_Found [sage] 2017/04/12(水) 18:14:33.99ID:??? の実装を試みたが、とんでもなく複雑で諦めた 皆、すごいな : Name_Not_Found [sage] 2017/04/12(水) 18:46:32.03ID:??? こんな仕様が普通に出てきたら泣くw これはクイズみたいなもんだと思うぞ : Name_Not_Found [sage] 2017/04/12(水) 18:49:55.18ID:??? 技術力の差が雲泥だな いい加減な文句いってた奴が一掃されてる : Name_Not_Found [sage] 2017/04/12(水) 18:57:07.43ID:??? なんでそんなこと効くの?要件にないでしょ? : Name_Not_Found [sage] 2017/04/12(水) 19:15:50.83ID:??? をよく読め : Name_Not_Found [] 2017/04/12(水) 19:43:09.26:acFf5OaP の流れ読んでないけど >div1から後方に探索して、最初に現れる<p>を求めたい 後方に検索ってp#p4のことじゃないの? だと見つからないと思うんだけど <p id=p3></p> <div> <p id=p4></p> <div id="div1"> <div id="div2"></div> </div> </div> <div> <p></p> </div> : Name_Not_Found [sage] 2017/04/12(水) 19:46:11.07ID:??? <div id="div0"> <div> <div id="div1"> <div id="div2"></div> </div> </div> <div> <p></p> </div> </div> にできんのか?超簡単だぞ こんなんなる前に普通は手を打つよな : Name_Not_Found [sage] 2017/04/12(水) 19:48:14.59ID:??? 445だが ちょ!後方ってのは上なのか? : Name_Not_Found [] 2017/04/12(水) 19:49:57.11:acFf5OaP 俺の感覚だと上の方に検索するとしか思えないんだけど・・・ まぁ回答者が質問者を忖度してるなら、何も言わないけどね : Name_Not_Found [sage] 2017/04/12(水) 19:54:46.59ID:??? のいう「後方」とはテキストエディタで "<p" を検索した際に #div1 よりも後方検索されるp要素全て グループ分けするならこう - #div1 の子孫要素 - #div1 の弟要素 - #div1 の親/祖先要素の弟要素 - #div1 の親/祖先要素の弟要素の子孫要素 はセレクタを利用する事で対応したので簡単なコードに見えるが、内部動作的にはかなり複雑 : Name_Not_Found [sage] 2017/04/12(水) 19:59:37.83ID:??? の一つだけある <p></p> の位置を見ればわかると思うんだが… 「親の弟の子要素」も後方に含む : Name_Not_Found [sage] 2017/04/12(水) 20:04:56.37ID:??? の<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> : Name_Not_Found [sage] 2017/04/12(水) 20:15:40.27ID:??? そういう意味です。 : Name_Not_Found [sage] 2017/04/12(水) 20:20:34.04ID:??? あなたがなら今までのレス全てに目を通して結果報告なりお礼なりしなさい これだけ騒がせておいて「そういう意味です。」で終わらせるつもりなら厚顔無恥というほかない : Name_Not_Found [sage] 2017/04/12(水) 21:46:08.28ID:??? 俺(うち)の感覚だと後方と言えば普通下だが 質問者が出てこない限り と思ってたら 全くだな まさか今まで静観してたわけではないよな だとするととんでもないぞ : Name_Not_Found [sage] 2017/04/12(水) 22:02:14.76ID:??? に異論はないが 質問者ならはっきりしてくれ (1)「後方」とは上から下なのか、下から上なのか (2)「最初に」とは一番上なのか、下なのか (3)「div1やdiv2にも<p>が有る場合にはそちらを検出」とはdiv1を先に検出で間違いないか (4)のようにHTMLの構造を変えることができるか (5)idのついてないdivにidをつけることは可能か : Name_Not_Found [sage] 2017/04/12(水) 22:15:14.60ID:??? htnlの構造変えて楽勝なら一旦jsで変えればいいんじゃないか : Name_Not_Found [sage] 2017/04/12(水) 22:30:37.10ID:??? が真ならも真だよ 「が適合するp要素群の中で一番初めにマッチするp要素を返す」仕様が正しい ,438に要件を満たすコードがあるので参考にしてみては? : Name_Not_Found [sage] 2017/04/13(木) 00:07:23.05ID:??? は、jQueryがマッチした要素を、深さ優先順で並べることを、使ったやり方 : Name_Not_Found [sage] 2017/04/13(木) 00:40:58.84ID:??? もそういう意味では同じだな(436はTreeWalker依存だが) 将来的にSelectors Level 4が実装されれば、もっと簡単に書ける document.querySelector('#target-1:matches( p,~p),:has( #target-1)~:matches(p,* p)'); jQueryにも早く取り込んでほしいものだが、未だに:has()がjQuery Extensionsに分類されているところを見るにブラウザが実装し始めてから後追い実装しそうだな : Name_Not_Found [sage] 2017/04/13(木) 01:21:53.72ID:??? ネイティブ実装的にはのアルゴリズムを流用して、document.evaluateを使用するのがお手軽だな : Name_Not_Found [sage] 2017/04/13(木) 01:27:35.41ID:??? どんどん楽になっているようで どんどん新しい技術が増え続ける どうにもならんのかね : Name_Not_Found [sage] 2017/04/13(木) 01:34:18.41ID:??? 言語が新しくなっていくのはJavaScriptに限った話ではないがな 新仕様についていけないなら古い仕様でいつまでも書いていてもいいけどね(JavaScriptは後方互換性には手厚いから) : Name_Not_Found [sage] 2017/04/13(木) 01:36:37.83ID:??? まさか20年も置い続けることに鳴るとは思わなかったゾ・・・ : Name_Not_Found [sage] 2017/04/13(木) 01:40:30.59ID:??? :matches()は皆が待ち望んだ疑似クラスだと思うのだが、どうして増える事が不満なんだろう 「年齢的にもう新しい事を覚えるのはきついからこれ以上増えないでくれ」的な愚痴? 探求心がなくなった時点で、技術者としては一線を退いた方がいい時期だと思うが : Name_Not_Found [sage] 2017/04/13(木) 07:34:39.45ID:??? フロントエンドは新しいのがバンバン入ってくるわりには 粗製乱造というかなんといかこりゃスマートだわ参りましたってプロダクトが無いよね : Name_Not_Found [sage] 2017/04/13(木) 07:37:10.08ID:??? JavaScriptはかなり特殊な立ち位置にいるから、お前(464)の感覚がずれてるだけじゃないの : Name_Not_Found [sage] 2017/04/13(木) 07:52:26.18ID:??? 「スマートだわ参りました」がお前は誰と戦ってるんだ状態だが、イテレータは「上手い妥協点を見つけたもんだな」と感心したわ : Name_Not_Found [sage] 2017/04/13(木) 08:00:24.33ID:??? 新しい仕様が増える事に不満を覚える理由が「粗製乱造」なら「ぐだぐだ言ってないで、覚えろ」とどやしつける お前が仕様をどう感じようが、覚えない理由にはならん : Name_Not_Found [sage] 2017/04/13(木) 08:46:59.28ID:??? >お前(464)の感覚がずれてる この書き方をする君の方がよぽどずれてると思う : Name_Not_Found [sage] 2017/04/13(木) 08:47:56.11ID:??? そういうのは大体フレームワーク化されている で、下手したら名前がバッティングして大変なことに : Name_Not_Found [sage] 2017/04/13(木) 19:44:54.19ID:??? が真ならも真だよ どうでもいい レス相手間違えてないか? : Name_Not_Found [sage] 2017/04/13(木) 19:52:54.28ID:??? 他に影響出たらどうすんだよw 大迷惑極まりないな 後々面倒だし 上で書かれてるが条件によってはfirst()かlast()で十分な可能性もある、が なんにしろ質問者はもう来そうにないからこれ以上はムダだな : Name_Not_Found [sage] 2017/04/13(木) 19:55:44.57ID:??? 要件を確認している人に答えて「どうでもいい」といわれてもな で理解できないからそんな質問()をしているのだろうに : Name_Not_Found [sage] 2017/04/13(木) 20:45:11.15ID:??? は十分想定内であって質問者への確認とは話が別 理解もなにも最初からのつもりだったが読み違いでは? 別人のレスと混同してるとか : Name_Not_Found [sage] 2017/04/14(金) 00:23:15.43ID:??? 質問者本人じゃなきゃ答えじゃないからどうでもいいわな : Name_Not_Found [] 2017/04/14(金) 05:11:50.56:qkWeHlCh 探索で、前方/後方は、forward/back で、back は遡る意味だから、紛らわしい 正しくは、 順方向/逆順(遡る)か、 先頭から末尾へ/末尾から先頭へ : Name_Not_Found [sage] 2017/04/14(金) 05:54:16.12ID:??? 要件が分かってないから質問しているわけだよな >450で十分理解できるのにわけ分からん補足要求してるから横から教えてくれただけだろ もっといえば、>314から>450の理解に至ることは十分可能だったが、先日からおかしな方向に解読して回答に文句をつける奴が多すぎる 当人の読解力不足を「質問書本人じゃなきゃ答えじゃない」と言い訳されても困る : Name_Not_Found [] 2017/04/14(金) 13:46:11.50:cAYW4DiS jqueryって死ぬ気で一ヶ月やれば簡単なものは閉開メニュー作れるようになると思うけどそれ以上のものを作るとなると死ぬ気で4ヵ月やっても怪しいと思う 参考書完璧に覚えただけじゃまだ作れないものあると思うけどどうすればいいの? : Name_Not_Found [sage] 2017/04/14(金) 20:41:06.56ID:??? まだ言ってるのか の時点ではすでに想定と言っておろうに何が不満なのだ? 質問者がはたしてで間違いないか確認することは誤ったことではなかろう でさえ本人か危ういし質問者本人かの問いに答えてないしなりすましも考えられるし そんな食いつくほどのことかね : Name_Not_Found [sage] 2017/04/14(金) 21:28:04.16ID:??? 依頼者はコードに詳しいわけではなくむしろな無知な場合が多い。 うちらが普通に使ってる言葉がそのまま通用するとは限らない。 思わぬ行き違いや思い込みを防ぐために要件を念入りに確認することは大切。 自分がそう思ってても質問者が必ずしもその意図で書いてるのかは質問者本人でないとわからない。 もっともIPもなくこの流れになっては本人ですと書かれても信憑性に欠けるが。 : Name_Not_Found [sage] 2017/04/14(金) 22:04:24.08ID:??? 面倒だから探索範囲をdivでくくれや HTMLが担当別なら頼み込め コード書くのも親切だがあんな状況になってることからしておそらくわからんだろ : Name_Not_Found [sage] 2017/04/14(金) 22:25:58.80ID:??? 気持ちは分かるし、確認行為が重要な事は認めるが、ぶっちゃけ頭が固すぎなんだよ >314から>450の3つのケースが導き出せるなら多少の語彙の拙さは柔軟に考えれば結論が出る事だろ 確認という意味ならの「上」「下」がテキストエディタで見たときの「上」なのかDOMツリーで見た時の親要素の意味での「上」なのか分からん まあ、質問者に分かる意味でいうならテキストエディタの意味での「上」だろうが、念を押すなら「確認」が必要だろうな ところで、<div id="div1"><div id="div2><p></p></div></div> なら上下関係が全くなくなるが、それも「確認」が必要だと思うか? で、テキストエディタとしての上下なら (1) 下 (2) 一番上 (3) ケースバイケース。div2の上にあるならdiv1直下を検出し、div2の下にあるならdiv2直下を検出。 という回答になる事がなぜ分からない? (4), (5) に関してはdiv1配下とdiv1外では明らかに構造が違うし、他人のサイトに適用したいのか、自分のサイトに適用したいのかでも変わるし、ぶっちゃけ最終目標次第で変わる 最適解は可否ではなく、目的で決まるからまじめにやるなら「最終目標」を先に聞く方がいいと思うがね : Name_Not_Found [sage] 2017/04/15(土) 00:23:53.53ID:??? DOMツリーの上下とテキストエディタの上下って同じじゃあないの? : Name_Not_Found [sage] 2017/04/15(土) 00:43:18.46ID:??? 別にどうも線でいいと思う 難しいものを作っていく内に技術が手につくので、それをもとに新しいものを作り出すことができるようになる : Name_Not_Found [] 2017/04/15(土) 06:22:47.31:G7rhzVSM 思う、ではだめだよ : Name_Not_Found [sage] 2017/04/15(土) 10:12:45.61ID:??? まーだdiv厨の相手してんのかよ : Name_Not_Found [sage] 2017/04/15(土) 10:30:01.01ID:??? が頭に浮かんだとしても上か下かは必ずしも明確ではない それを確認したということだろ 仕事の手順として普通のことを一人が粘着してるだけ 上に書かれてる通り質問者の明確な意図を確定できないから続けても無意味 : Name_Not_Found [sage] 2017/04/15(土) 10:33:46.34ID:??? すまん、アンカミス ね それが"思う"で話進めても無意味 よって終了 : Name_Not_Found [] 2017/04/15(土) 11:05:52.61:vNm5Bl79 「div1から後方に探索」で十分意味が通じると思うが : Name_Not_Found [sage] 2017/04/15(土) 11:41:24.79ID:??? 普通のウィジェットは、jQuery UI にあるだろ? : Name_Not_Found [sage] 2017/04/15(土) 12:38:31.67ID:??? しつこい 読み直し : Name_Not_Found [sage] 2017/04/15(土) 19:04:10.36ID:??? Edge でテストしていますが、ブラウザ内の<iframe>に、 2chのHTMLは読み込めて、表示もされますが、 そのHTMLが、クロスドメイン制限により、jQueryで取得できません 2chのHTMLを、ブラウザ内に読み込んで、DOMを解析したい。 やり方を教えて : Name_Not_Found [sage] 2017/04/15(土) 19:16:02.58ID:??? phpでローカルに読み込んでから取得すれば? : 491 [sage] 2017/04/15(土) 22:07:17.01ID:??? の「こらこら団報告書生成」ツールを、ピラフがPowerShellで作ったけど、 Windowsに限定されるから、JavaScriptでも作ろうかなと思って サーバーを立てていないと、JSONPでもダメだった ブラウザからのクロスドメインは難しいから、 YQL (Yahoo! Query Language)のサービスを使って、クロスドメインを可能にする、 jquery.xdomainajax.js プラグインしかないのか? 何か他に、OSSのライブラリは無いかな? dojox にあるのか? : Name_Not_Found [sage] 2017/04/15(土) 22:08:59.37ID:??? なんでそんなめんどくさいことをしてるのか分からん phpのfile_get_contents()で瞬殺じゃん : Name_Not_Found [sage] 2017/04/16(日) 10:40:48.72ID:??? DOMツリーに二次元的な意味はないから上下の概念もない >454のいう上下が「親子」なのか開発者ツールでDOMツリーを展開した時の上下の位置関係なのか分からないって事とでしょ 「確認(>454)」の「確認(>481)」に対して答えがないので、実際どういう意味だったのかは>454だけが知るところだろうね : Name_Not_Found [sage] 2017/04/16(日) 11:24:42.06ID:??? ツリーと言ってる時点で上下あるじゃんw ディレクトリツリーだって上あるだろ : Name_Not_Found [sage] 2017/04/16(日) 11:26:15.42ID:??? 上と下、前と後、この違いぐらい理解しろよw : Name_Not_Found [sage] 2017/04/16(日) 11:29:12.60ID:??? ディレクトリツリーで上とか下とか言っちゃう人なのか : Name_Not_Found [sage] 2017/04/16(日) 11:30:48.66ID:??? はいはいもうこの話はおしまい : Name_Not_Found [sage] 2017/04/16(日) 11:33:21.86ID:??? DOMで上下なんて言わんから気持ちは分からんでもない DOMツリーだって開発者ツールがたまたま上下に展開しているだけでただのイメージ図だしな : Name_Not_Found [sage] 2017/04/16(日) 11:34:47.89ID:??? エクスプローラー起動してみ ↑ってボタンが有るだろ : Name_Not_Found [sage] 2017/04/16(日) 11:41:04.32ID:??? それは親ディレクトリに移動の意味だよね 「上=親」の認識でいいの? エクスプローラとDOMを同一視するのにも疑問はあるけど : Name_Not_Found [sage] 2017/04/16(日) 11:43:24.39ID:??? > それは親ディレクトリに移動の意味だよね あえていうなら、[上の階層へ移動] の意味の [上へ] だな : Name_Not_Found [sage] 2017/04/16(日) 11:48:10.92ID:??? [↑] ボタンが「上」なら [←] ボタンは「左」なの? : Name_Not_Found [sage] 2017/04/16(日) 11:59:49.37ID:??? なかなか、上手い切り返しだな : Name_Not_Found [sage] 2017/04/16(日) 16:32:27.86ID:??? DOMでは上下と前後は同じ意味と思うが : Name_Not_Found [sage] 2017/04/16(日) 16:46:13.18ID:??? 前、後ろだろ? どっちが前かって? ビデオのリモコンでも見るといいよw : Name_Not_Found [sage] 2017/04/16(日) 18:36:25.01ID:??? DOM 仕様では階層関係に上(above や upper)や下( below や lower )という語が使われることはないな 常に親子か子孫先祖 : Name_Not_Found [sage] 2017/04/16(日) 22:50:45.12ID:??? 仕様が読めないから「上」や「前」と書いてるのだと思うよ 既に何人かで齟齬が出ているし、質問者との間でも認識違いが生まれるだろうね : Name_Not_Found [sage] 2017/04/17(月) 21:47:27.96ID:??? の(1)は質問者に不安だったから上下と書いたまでで親子関係ではない その前の探索の流れが深さより方向性がでてたから 素人的に前後はとらえようによってはどちらにでも取れる 上下なら画面で見たままなのでそう表現しただけ 親子は(3)で書いてある もっともそれらも曖昧ではあったな : 491 [sage] 2017/04/18(火) 13:16:31.47ID:??? ttps://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 に改造した物はあるかな? : Name_Not_Found [sage] 2017/04/18(火) 14:07:43.59ID:??? そこまで分かっているなら .then() で書き換えればいい の4行目を読んで出直してきなさい : 491 [sage] 2017/04/18(火) 17:20:40.82ID:??? 自己レス。 結局、jquery.xdomainajax.js を使わず、 jQueryから直接、YQL を使って、2ch のHTMLを取得できた var url = "ttp://hayabusa6.2ch.net/test/read.cgi/linux/1479499953/6"; // 全体の設定 $.ajaxSetup({ data: {format: 'xml'}, timeout: 60 * 1000 }); var YQL = ' ttp://query.yahooapis.com/v1/public/yql?callback=?', query = 'select * from html where url="' + url + '" and xpath="*"'; $.ajax( " ttp://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'); }); : Name_Not_Found [sage] 2017/04/18(火) 18:09:04.74ID:??? のアドバイスは徹底放置か 作り終わるまで延々と質問しそうだな、この人は : Name_Not_Found [] 2017/04/18(火) 20:04:30.48:vRD5yYGw よく見てなかったけどdatで取得してないの?html取得してるの?アホなの? : 491 [sage] 2017/04/18(火) 21:38:46.46ID:??? dat? 意味が分からない。 漏れは、2chのHTMLを取得して、その中の特定のタグを、取り出している 2chのHTMLには、2種類あって、<dt> があるものと、 [data-id=999] のように、レス番号で取り出すものがある : Name_Not_Found [] 2017/04/18(火) 21:43:56.88:vRD5yYGw 普通はdatファイルからスレを操作する htmlファイルから操作するアホはおらん このスレのdatファイル ttps://goo.gl/B1I8Ge : 491 [sage] 2017/04/19(水) 13:54:57.78ID:??? の「こらこら団報告書生成」ツールも、ピラフがPowerShellで作ったツールも、 2ch からHTMLを取得して、正規表現で、特定のタグを抜き出している datファイルは、知らなかった : Name_Not_Found [sage] 2017/04/19(水) 16:17:28.18ID:??? よろしくお願いします。 画面上に常に表示するメニューで各アンカーにスクロールするようにしたいです。 ○px下がったら下から「上に戻る」ボタンを出すjqueryを元にちょっと修正してみたのですが、画面リロード後の動作が うまくいきません。 1.スクロールして少し下がったら出てくるようにしたいのに最初から出てる。(一度下げて上に戻すと消える) 2.リロードして1回目のクリック時だけスクロールしないで移動してしまう(するするっと動かないでぱっと移動する) また、リロードしてすぐ1回目のクリック時だけ上余白が効かない(var headerHight分下がらない) 以下ソースですが、どこを修正したらいいでしょうか? 長いと怒られたので次に記載します… : Name_Not_Found [sage] 2017/04/19(水) 16:22:32.65ID:??? 「他人のコードがこうだった」と言い訳せずに自分自身で調べろ ttp://vipprog.net/wiki/%E5%B0%82%E3%83%96%E3%83%A9%E9%96%8B%E7%99%BA%E3%81%B8%E3%81%AE%E9%81%93.html : Name_Not_Found [sage] 2017/04/19(水) 16:23:50.84ID:??? コードはjsfiddleにでもUPしてくれ 複数レスにまたがってコードを分割して投稿するのはレスの無駄だから : Name_Not_Found [sage] 2017/04/19(水) 16:24:25.72ID:??? 前半 // 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); } } }); : Name_Not_Found [sage] 2017/04/19(水) 16:25:50.70ID:??? すみません。そちらに書き込みします! : Name_Not_Found [sage] 2017/04/19(水) 16:27:26.93ID:??? です。 : Name_Not_Found [sage] 2017/04/19(水) 16:27:58.63ID:??? 失敗… です。 ここに貼り付けました。 ttps://jsfiddle.net/x01yb2ga/ : Name_Not_Found [sage] 2017/04/19(水) 16:40:01.62ID:??? ReferenceError: $ is not defined になっている上にHTML/CSSがないので動かない $('#ri-menu') が存在しないからな [JavaScript] ボタンを押して jquery.js を読み込むのは当然として、諸々を動くコードにしてくれないかね : Name_Not_Found [sage] 2017/04/19(水) 16:58:02.25ID:??? さん 返答ありがとうございます。 jsfiddleの使い方がよく分かって無いのでちゃんとなっているかどうか不安ですが… html部分はどの程度貼り付けたらいいのでしょうか? とりあえず、そのボタン部分とcss、移動先は貼りつけました。 あと、[JavaScript] ボタンを押して jquery1.9.1 を選択してみました。(実際は1.10.1使ってます。) ttps://jsfiddle.net/x01yb2ga/6/ これでRUNをクリックしたら、何となくですけど同じような現象になりました! : 491 [sage] 2017/04/19(水) 18:08:04.67ID:??? IE11からでは、2chのdatファイルにアクセスできないかも。 規格が変わったと言われる 漏れは、専ブラ開発者ではないし、 2chの規格には、色々あるから難しい ひとまずHTMLから、特定のタグを抜き出しておく : Name_Not_Found [sage] 2017/04/19(水) 18:48:37.50ID:??? 取れる 2ch.netじゃなくscの方を使う このスレのdatファイル ttps://goo.gl/B1I8Ge : Name_Not_Found [sage] 2017/04/19(水) 18:50:41.72ID:??? 前から思ってるけど、名前は「NG抜き出しツール作成中」とかにしたほうが良くない? 初めてみた人はなんの書き込みかも分からないから、全く手伝ってもらえないよ わかりやすい名前なら、優しい人が気づいて協力してくれると思う : Name_Not_Found [sage] 2017/04/19(水) 20:09:56.52ID:??? メニュー表示はcssの#ri-menuをright: -200px;に 一番上以外でリロードされた時に表示させるなら scrollイベント登録後、$(window).trigger("scroll");でイベント強制発火させる 1回目スクロールしないのはtopBtn.clickで囲ってるのが余計 メニューがクリックされてからイベント登録したんじゃその回は発動しない : 491 [sage] 2017/04/19(水) 21:48:24.93ID:??? 漏れは、依頼者じゃないよ。 最初に作っていた、271 だよ。 ただ、怪物ピラフがPowerShellで、あっという間に作ってしまったからw 2chのdatファイルは、仕様が変わるかもしれないし、 契約者以外が使うと、業務妨害で逮捕されるかもしれないし、 危険だから、やめておくわ 検索しても、怖い事ばかり書いてあって、プラス面が無い : Name_Not_Found [sage] 2017/04/19(水) 21:57:59.65ID:??? datファイルの仕様は長らく変わってないがな それとも、datファイルの仕様が変わっても出力htmlファイルの仕様が変わらないと本気で信じているのだろうか : Name_Not_Found [sage] 2017/04/19(水) 22:11:42.38ID:??? htmlの方が変わるわボケ : 491 [sage] 2017/04/19(水) 23:04:59.26ID:??? 契約者以外が無断で、APIを使ったら即逮捕ですよとか、 2chの運営会社は、怖い事ばっかり書いてる こいつら、ヤクザっぽい : Name_Not_Found [sage] 2017/04/19(水) 23:45:31.82ID:??? 気になるなら、datを公開しているscの規約を確かめるべき : 491 [sage] 2017/04/20(木) 00:16:40.66ID:??? <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で取得した方が、データの終わりにタグがあるから、判別しやすい : Name_Not_Found [sage] 2017/04/20(木) 01:30:35.71ID:??? datファイルはごく単純なCSVだから一意な処理でコードを書けるでしょ : 491 [sage] 2017/04/20(木) 01:31:08.03ID:??? 【2chまとめ対策?】2ちゃんねるがdatを廃止! 今後はAPIでの提供で無断でクロールすると違法に! ttp://www.yukawanet.com/archives/4827167.html やっぱり、契約者以外が無断で、datファイルにアクセスすると、逮捕されそう 逮捕されるのも、馬鹿らしい。 HTMLから、データを取得しておくわ : Name_Not_Found [sage] 2017/04/20(木) 01:44:53.84ID:??? scの管理人は2ちゃんねるの管理人とは別なんだがな : Name_Not_Found [sage] 2017/04/20(木) 02:01:46.25ID:??? 2ちゃんねるの主張を遵守するならAPIを使用せずにアクセスする事を禁じているから、DOMでアクセスするのもNGだと思うけど ttps://developer.2ch.net/ で開発者登録を申請すべきだよ : Name_Not_Found [sage] 2017/04/20(木) 02:06:51.29ID:??? datデータ取得は駄目と認識している人が、なぜWebスクレイピングが許可されると思ったんだろ : Name_Not_Found [sage] 2017/04/20(木) 02:11:17.92ID:??? (認証なしの)ウェブサイトは公開情報だからだろ? : Name_Not_Found [sage] 2017/04/20(木) 02:13:09.29ID:??? datもHTMLも公開情報だよ datだけ禁止してHTMLを許可する明確な理由がない : Name_Not_Found [sage] 2017/04/20(木) 02:17:47.04ID:??? 公開情報でもWebスクレイピングは違法だけどな : Name_Not_Found [sage] 2017/04/20(木) 07:30:12.54ID:??? htmlでもクロールしてることはバレバレなんだよなぁ 結局逮捕されるリスクは変わらないんだが : 527 [sage] 2017/04/20(木) 10:35:49.24ID:??? さん ありがとうございます! 無事予定通りの動きになりました!! : Name_Not_Found [sage] 2017/04/21(金) 08:46:13.65ID:??? そこで目視によるデータ取得ですよ : 491 [sage] 2017/04/21(金) 13:20:00.03ID:??? sc は、2chを回って、データを収集しているから、タイムラグがあるし、 2chから禁止される可能性が高い ツールでアクセスしても、手入力でアクセスしても、基本的には同じ 〜/1〜1000 みたいに、スレの全データを、頻繁に取得していれば、 その人が業務妨害で逮捕される ツール製作者としては、1要求毎に2秒ほど、sleep しておく。 要求も、10〜20ぐらいに制限しておく まあそれでも、2chぐらい怖い会社なら、ツール製作者も刑事告訴してくるかも。 2chは。ちょっとでも無断でAPIにアクセスすれば逮捕するぞ、 って公言している会社だから 本当は、こういう会社とは、関わり合いにならない方がいい。 アクセスする者に、こういう脅しをするなど、あきらかに普通の会社とは違うから : Name_Not_Found [sage] 2017/04/21(金) 16:33:46.75ID:??? SCからのアクセスなんかちょっと本気出せば締め出せると思うのだがなんで取り組まないんだ? ひょっとして茶番なのか? : Name_Not_Found [sage] 2017/04/21(金) 18:33:20.53ID:??? あれ不思議だよな : Name_Not_Found [sage] 2017/04/21(金) 21:47:17.53ID:??? いたちごっこだから。 締め出した所で本質的に2chがアカウントなしに 見れるものである以上、回避策はある。 だからそんなものに頼るよりも、 法律を使って正々堂々と対応したほうが効率がいい。 : Name_Not_Found [sage] 2017/04/21(金) 22:11:35.94ID:??? 裏でつながってるんじゃないか : Name_Not_Found [sage] 2017/04/21(金) 22:40:30.83ID:??? ユーザーに受け入れられる2ch代替サービスが現れないにはなぜなんだ 2chがブラックということはみんなわかってる筈なのに : Name_Not_Found [sage] 2017/04/21(金) 23:02:41.32ID:??? 1000で終わるシステムなんてめんどくさいだけだよ ブラックが好きな人が残っているだけ : Name_Not_Found [sage] 2017/04/22(土) 21:04:50.02ID:??? 2chは古臭いシステムで真似するメリットがまるでないから 質問掲示板としてはstackoverflowが頭一つ抜けて優秀な印象だな : Name_Not_Found [sage] 2017/04/24(月) 21:35:37.00ID:??? すみません、わかる方がいらっしゃれば教えてください。 表の画面表示が完了したところで、表の各行にプログレスバーを追加するスクリプトを実行したいのですが、 「表の画面表示→プログレスバー追加スクリプト実行」ではなく、 「画面真っ白→しばらくたってからプログレスバーが追加された状態で表が画面表示」 となってしまいます。 参考になりそうなサイトから以下のようにコードを作ったのですが、 「表の画面表示→プログレスバー追加スクリプト実行」としたい場合、どのようにすれば良いでしょうか。 <html> <body> <table id="target"> 〜略〜 </table> </body> </html> : Name_Not_Found [sage] 2017/04/24(月) 21:36:03.08ID:??? <script> var target = $('<table id="target"></table>'); target.ready(function() { プログレスバー追加処理 }); </script> : Name_Not_Found [sage] 2017/04/24(月) 23:02:01.68ID:??? 変なコード書くなよ : Name_Not_Found [sage] 2017/04/25(火) 00:05:52.78ID:??? ネタだろw : Name_Not_Found [sage] 2017/04/25(火) 08:07:32.77ID:??? です。 スクリプト部分にwindow.onload や jQuery(function() { を 試したのですが、どうしても「画面表示→スクリプト実行」ができなくて、 実現方法をさがしている際にのようなコーディングをしている サイトにあたり、とりあえず試してみた次第です。 window.onload や jQuery(function() { では 「画面表示→スクリプト実行」はできないのでしょうか。 : Name_Not_Found [sage] 2017/04/25(火) 19:27:28.36ID:??? 出来てるから、出来ないコードを出しなさい。 jQuery(function () { alert('スクリプト実行'); }); 動的に挿入されるDOMノードは動的処理の中で上手くやりなさい。 : Name_Not_Found [sage] 2017/04/26(水) 08:05:50.25ID:??? です。 ありがとうございます。 表の作成処理はの通りです。 スクリプトは以下のようにしていますが、 「表の画面表示→プログレスバー追加」にはならず、 画面表示までしばらく真っ白な画面のままで、 プログレスバーが追加された状態で一気に表が画面表示されます。 スクリプトは以下の通りです。 $(window).on('load',function(){ プログレスバー追加処理 }); ちなみにでも同じ現象でした。 : Name_Not_Found [sage] 2017/04/27(木) 15:50:34.69ID:??? onloadは表示されたではなく必要なリソースの読み込みが終わっただからね たいていのブラウザはページ読み込み時は表示開始に若干ディレイかけて高速化してるし バカでかいテーブルだとレイアウト計算に時間かかったりするし タイマーで適当に遅延させればいいんじゃない? : Name_Not_Found [sage] 2017/04/27(木) 19:30:32.38ID:??? プログレスバー追加処理がないようだが…。 非同期処理なのでは? : Name_Not_Found [sage] 2017/04/28(金) 22:01:58.96ID:??? cssのtable-layoutをいじれば何とかなりそう テーブルの幅、各セルの幅、バー含むセルの中身などによるからその辺ほぼ全文見ないと何とも言えん : Name_Not_Found [sage] 2017/04/29(土) 10:00:01.78ID:??? ttps://www.w3schools.com/howto/howto_js_accordion.asp このサンプルでは、クリックしたSectionがどんどん開いていきます。 それを、どれかのSectionを開いたら、今開いているSectionが閉じるようにしたいのですが、 どうすれば良いでしょうか? : Name_Not_Found [sage] 2017/04/29(土) 10:51:16.01ID:??? クリックしたら一旦全部閉じる処理をして 同時にクリックした奴だけを開けば良いんだよ : Name_Not_Found [sage] 2017/04/29(土) 13:32:23.07ID:??? 一回全部apiに目を通したホグあ早いぞ の通り 閉じる関数はこれ ttp://semooh.jp/jquery/api/effects/hide/_/ : Name_Not_Found [sage] 2017/04/30(日) 16:21:51.51ID:??? semooh.jpまだ生きてたのかよ 一刻も早く滅んで欲しい : Name_Not_Found [sage] 2017/04/30(日) 16:45:28.88ID:??? jQuery+関数で検索するとよく引っかかるんだよな 内容考えるから更新してほしいわ : Name_Not_Found [sage] 2017/05/01(月) 12:48:45.93ID:??? 基本、公式サイトしか読まないからどうでもいい 日本語のサイトはどれも信用してない 自己検証すれば、ある程度は気が付けるレベルだしな : Name_Not_Found [sage] 2017/05/01(月) 19:20:34.20ID:??? 教えてください。 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月が選択されていますが、クリックイベントが発生しない。) わかる方がいらっしゃれば、教えていただけないでしょうか。 : Name_Not_Found [sage] 2017/05/01(月) 19:42:59.41ID:??? うまく動かない時はコードを短くして原因を絞り込むと良いと思う これじゃダメ化 $('#select-form input[name=month-radio]').on('click', function(e) { }); 〜処理〜 }); : Name_Not_Found [sage] 2017/05/01(月) 20:11:49.70ID:??? 574さん 早速ありがとうございます。 それもやってみたのですが、だめでした、、、 : Name_Not_Found [sage] 2017/05/01(月) 20:11:56.40ID:??? 〜処理〜 : Name_Not_Found [sage] 2017/05/01(月) 20:13:32.86ID:??? $('#select-form input[name=month-radio]').on('click keydown keyup keypress ', function(e) { alert('xxx'); }); }); : Name_Not_Found [sage] 2017/05/01(月) 20:17:52.25ID:??? 処理わろた : Name_Not_Found [sage] 2017/05/01(月) 20:38:34.37ID:??? 577さん ありがとうございます。 click keydown keyup keypress もやってみましたが、やはりイベントを受け取らないようです。 : Name_Not_Found [sage] 2017/05/01(月) 21:37:35.67ID:??? $('#btn_sel_10').trigger('click'); でイベント停止か何かしてないか : Name_Not_Found [sage] 2017/05/01(月) 21:37:39.34ID:??? 普通に動くけど? ttps://jsfiddle.net/acjyv16u/ : Name_Not_Found [sage] 2017/05/01(月) 21:41:13.07ID:??? あとこの場合は、changeイベントを捉えるだけで良いと思うけど : Name_Not_Found [sage] 2017/05/01(月) 22:42:12.63ID:??? 581さん 本当ですか、自分のコードをもう少し簡略化して、試してみます。 最初はchangeでやっていたのですが、不要なところでイベントが何回も発生してしまって、やむなくclickに変更した次第です。 : Name_Not_Found [sage] 2017/05/01(月) 22:55:41.46ID:??? > 不要なところでイベントが何回も発生してしまって、やむなくclickに変更した次第です。 これなぁ、こうなるからtriggerは使わないほうが良いよと 書こうと思ったんだよ。楽になることもあるから言わなかったけど。 これ以外にもtrigger多用してない? だったら関数を作って、その関数を直接呼ぶ or イベントハンドラにしたほうがいいよ : Name_Not_Found [sage] 2017/05/01(月) 23:12:03.19ID:??? jQueryをjapanQueryみたいに国産のものと思っていたのは私だけですよね? : Name_Not_Found [sage] 2017/05/04(木) 11:49:00.39ID:??? <script src="file.js"> window.onload = function () { initFunc(); }; </script> こういう書き方をしても実行出来ないようですが、これはダメですか? : Name_Not_Found [sage] 2017/05/04(木) 12:12:58.27ID:??? ダメです srcかインラインどちらかで : Name_Not_Found [sage] 2017/05/04(木) 13:20:12.87ID:??? レスありがとうございました。 なぜ出来ないのでしょうか? こういう記述をしても自然な感じだと思うのですが。 : Name_Not_Found [sage] 2017/05/04(木) 13:52:41.20ID:??? 実は俺も同じことを考えたことがあるけど、仕様と納得するしかない そこを考えても時間の無駄だぞ : Name_Not_Found [sage] 2017/05/04(木) 19:13:31.45ID:??? document.addEventListener("mousemove",や .on("mousemove", でマウスの動きを取得したいのですが、 Googleアドセンスなどの広告の上をマウスが動くとイベントが来ない場合があります。 広告の上でも確実にイベントを取得する方法はありますか? : Name_Not_Found [sage] 2017/05/05(金) 01:38:46.11ID:??? 広告上のイベントが拾えないのは、たぶんiframeになってるせい。 (スタイルやスクリプトの干渉を嫌ってるのかしらんが、結構よくある。二重三重になってることも) で、iframe内部のイベントの伝播は内部のdocumentで止まるし、広告ってことはクロスドメイン制限で内部へのイベントハンドラ設定も不可だろうから、mousemoveイベントを拾うのはかなり厳しいんじゃないかと。 何がしたいのかわからないからなんとも言えないが、iframe要素のmouseenter/mouseleaveは拾えるはずなので、それで事足りるのであればこちらで。 : Name_Not_Found [sage] 2017/05/05(金) 05:27:05.42ID:??? なるほど、ありがとうございました。 目的は単純な実験です。マウスを動かすとその軌跡に沿って画像が動くなど。 : Name_Not_Found [sage] 2017/05/05(金) 07:51:26.88ID:??? 広告の上を覆うような透明な空ボックスでも追加しとく : Name_Not_Found [sage] 2017/05/05(金) 09:29:43.20ID:??? それ考えたけど、多分色々なところで弊害が出ると思う : Name_Not_Found [sage] 2017/05/05(金) 10:05:30.84ID:??? 広告がクリック出来ないだろ。 : Name_Not_Found [sage] 2017/05/05(金) 10:48:01.08ID:??? mousedown のタイミングでボックスを外すとかでうまくいかないかな で、 1秒後に復活 ちゃんと広告に click 発火されるかあやしいが : Name_Not_Found [] 2017/05/05(金) 10:54:08.04://armgZI 君、頭いいな。 実験結果を教えてくれ。 : Name_Not_Found [sage] 2017/05/07(日) 23:22:28.75ID:??? 質問です validate engineで画面の入力チェックをしているのですが、 submit以外のタイミング、例えば特定のボタンを押された時に、 formのある一部分、たとえば特定のsection単位でvalidate engineを発動させたいです formでsubmitのタイミングで…というのはできてるのですが、 上記のように使用するにはどうしたらいいんでしょうか? : Name_Not_Found [sage] 2017/05/07(日) 23:25:37.78ID:??? ちなみに最終的にはformの全ての内容をsubmitしてDB登録にいきます : Name_Not_Found [sage] 2017/05/08(月) 00:30:42.62ID:??? なんかまたjQueryプラグインにする必要がない物を jQueryプラグインにしている臭がするな : Name_Not_Found [sage] 2017/05/08(月) 09:27:23.24ID:??? こいつらのにおいを消してやるッ! : Name_Not_Found [sage] 2017/05/26(金) 23:14:50.96ID:??? 数行のためにjQueryを読み込みするのは無駄な行為だと先生に注意されたのですが具体的にどの変が無駄なのか教えて欲しいです : Name_Not_Found [sage] 2017/05/26(金) 23:40:05.95ID:??? jQueryは主にDOM操作などの生産性を上げるjavascriptライブラリ 数行なら生産性の向上は殆ど見込めないから無駄 : Name_Not_Found [sage] 2017/05/27(土) 01:28:41.74ID:??? 具体的に説明。 影響があるのは何Mといった大きなjQueryの内容を使うスクリプトやサーバー管理者です。 一件のjQueryを読み込む程度なら気にする必要はありませんが、アクセス数の多いウェブサイトだと必然的にjQueryのリクエストも増えます。 その結果、サーバー稼働率・負荷上昇に繋がります。 サーバー性能が良ければさほど気にする必要はありません。 ですが少しでも快適にするためには無駄を省く必要はありますよ。 ちなみにCDNは接続できない地区またはブロックされることもあります。日本でも繋がりにくいときもありますので業務用としてはお薦めできません。 : Name_Not_Found [sage] 2017/05/27(土) 02:35:59.50ID:??? 少しならネイティブ 簡単なものならjQuery 大きなものならもっと便利なものあるから探して使え jQueryは旧バージョン使われなくなったらオワコンになるかもな : Name_Not_Found [sage] 2017/05/28(日) 04:14:28.42ID:??? クリックされた要素と、その次の要素をセレクタにしたいと考えています。 thisと次の要素となると思うのですが、どのように指定すればいいのでしょうか? : Name_Not_Found [sage] 2017/05/28(日) 07:25:31.33ID:??? $(this).next(); : Name_Not_Found [sage] 2017/05/28(日) 08:57:22.85ID:??? ありがとうございます。 単体ではなくthisとthisの次を、まとめて記述できたらいいなと思っているのですが、 方法はありますか? ↓のような感じで・・・ $(this, thisの次)... : Name_Not_Found [sage] 2017/05/28(日) 09:27:15.82ID:??? 初心者ですが質問したいです。 ・@社員番号と名前の セレクトボックスがあります ・Aセレクトボックスが選択されたら 社員番号、名前、メールアドレス、電話番号 を下に表示する ・非同期通信(その他大量の項目編集中の一部のため) 画面起動時@のセレクトボックスを作成しています。 Ajaxで@でセレクトされた社員番号から、 社員情報を取得してAを描画、が一番楽ですが、 すでに@のセレクトボックス作成時にその情報は横並びで持っているんです(メールアドレス、電話番号) Ajaxでわざわざdbアクセスしなくても jqueryだけで表示することはできますか? セレクトボックスに隠しで持たせることなどできるのでしょうか? わかりにくかったらすいません よろしくお願いします。 : Name_Not_Found [sage] 2017/05/28(日) 10:33:41.37ID:??? 目的がよく分からないけど 統合したいなら配列にして参照したら? var elem = [this, this.nextSibling]; 持ってきたデータを変数に代入しておいて使ったら? : Name_Not_Found [sage] 2017/05/28(日) 12:50:40.29ID:??? + JavaScript の質問用スレッド vol.129 + [無断転載禁止]©2ch.net ttp://echo.2ch.net/test/read.cgi/hp/1456242505/681-682 : Name_Not_Found [sage] 2017/05/28(日) 12:57:46.94ID:??? hiddenで画面に全て隠し持つってことですか? それともselectのoption内に隠し持てたりします? 普通のアプリケーションだと当たり前のことが webだと値の保持ができないので どうしたらいいのかな?と。 : Name_Not_Found [sage] 2017/05/28(日) 13:12:19.54ID:??? hiddenを使うこともできるし、jQueryを使えば 各要素に関連したデータを持つための data()メソッドというものがある : Name_Not_Found [sage] 2017/05/28(日) 14:07:25.63ID:??? addBack : Name_Not_Found [sage] 2017/05/28(日) 17:01:37.90ID:??? たびたびどうも。 教えていただいたのを試してみましたが、自分ではできませんでした。 すみません・・・ セレクタの $(this)... と $('+p',this)... をまとめて記述する方法ってないのでしょうか? thisがあると別個でなければ駄目とかなんですかね? : Name_Not_Found [sage] 2017/05/28(日) 17:06:13.81ID:??? しつこい。こっちに答え書いてあるだろ + JavaScript の質問用スレッド vol.129 + [無断転載禁止]©2ch.net ttp://echo.2ch.net/test/read.cgi/hp/1456242505/681-682 : Name_Not_Found [sage] 2017/05/28(日) 22:44:24.40ID:??? ではないが「持ってきたデータを変数に代入しておいて使ったら?」がなんでスルーされてるかわからん データが膨大でできないとか? : Name_Not_Found [sage] 2017/05/28(日) 23:31:35.40ID:??? 教える側に問題がある : Name_Not_Found [sage] 2017/05/29(月) 13:11:12.82ID:??? 具体的には? : Name_Not_Found [sage] 2017/05/29(月) 14:17:36.01ID:??? は「情報は横並びで持っている」というが、どこに持っていて、どこまで理解していて、何に悩んでいるのか、が不明なので答えようがないな。 回答よりも質問の不備が目立つ。 : Name_Not_Found [sage] 2017/05/29(月) 14:28:26.47ID:??? そもそも、クリックされた要素はセレクタで指定出来ないわけだが、thisとセレクタを混同してないか? jQueryオブジェクトを統合したいならadd ttps://api.jquery.com/add/ : Name_Not_Found [sage] 2017/05/29(月) 17:09:39.94ID:??? セレクトボックスを作成する時の Arraylist(サーバーから取得した値)に、 社員番号、名前、メールアドレス、電話番号を持ってるという事です そのArrayListをforeschして、社員番号をセレクトボックスのオプションのvalueに 名前をテキストに表示して作っています。 せっかくメールアドレスも電話番号も持ち合わせてるのですが、 セレクトボックスで値を変えるたびにajaxで社員番号をキーにメールアドレスと電話番号を取得するのは イケてないのかなぁと思ったんです。 うまく説明できなくてすいません。 : Name_Not_Found [sage] 2017/05/29(月) 17:13:22.79ID:??? さんのカスタムデータ属性が使えそうだな!と思っています。 : Name_Not_Found [sage] 2017/05/29(月) 18:37:35.30ID:??? Arraylistが全データなんでしょ? それならの言うようにキャシュしておいて使えば済むと思うが : Name_Not_Found [sage] 2017/05/29(月) 18:41:17.43ID:??? あくまでArraylisが他で更新されないことを前提でね もしも他での更新をリアルタイムで反映させたいなら毎回持ってくればいいんじゃないの? : Name_Not_Found [sage] 2017/05/29(月) 20:13:12.54ID:??? わからないのに知ったかぶりして回答する奴大杉 : Name_Not_Found [sage] 2017/05/29(月) 20:32:34.61ID:??? そのセレクトボックスは単一選択だよな? 各optionにvalue="数値"(またはindex())で、それ取得してそのままArraylistのインデックス $('@').change(function(){ Aを実行 }); あとdata()はjQueryがキャッシュ使うのでリアルタイム性には注意な : Name_Not_Found [sage] 2017/05/29(月) 20:33:41.28ID:??? では君の答え、またはレスはどれ? : Name_Not_Found [sage] 2017/05/31(水) 08:44:05.07ID:??? を理由に毎回Ajaxで持ってくるようにします。 その方が組むのが楽ですね。 私がwebに初心者すぎるのが原因かと思いますが キャッシュしておいて…みたいなのは サーバ側でキャッシュデータとして登録しておいて Jquery側のファンクションでキャッシュデータの読み込みができるってこと? キャッシュデータの読み込みをajaxでやるっていうこと? 画面のhiddenに持つってことではないですよね?(これはいや) : Name_Not_Found [] 2017/05/31(水) 21:00:37.39:vyKeYlnl プラグイン作りの勉強をしています。 基礎的なことなのですが、プラグインの関数内で 呼び出し元のIDを表示するにはどうすれば良いのでしょうか? $.fn.test = function() { var id = $(this).attr('id'); //testを取得したい alert(id); }; $('#test').test(); これでは駄目でした : Name_Not_Found [sage] 2017/05/31(水) 23:27:21.54ID:??? 普通に動いているが? ttps://jsfiddle.net/y5vp4mdL/ : Name_Not_Found [sage] 2017/06/01(木) 01:10:35.39ID:??? これだと確かに実行されるのですが、自分の環境だと駄目です。(undefinedになる 環境と言ってもchromeで実行しているだけですが・・・ (あと、jQueryのバージョンを変えても同じです : 630 [sage] 2017/06/01(木) 01:33:14.98ID:??? わかりました。もしかしてプラグインって<head>内に入れちゃ駄目なんですかね? のソースを</body>の前に書いたらアラートで「test」が表示されました。 : Name_Not_Found [sage] 2017/06/01(木) 01:45:42.72ID:??? そんな事はない jQuery(function () { }); で括れば動作するが、プラグイン以前の問題だな ttps://api.jquery.com/jQuery/#jQuery3 : 630 [sage] 2017/06/01(木) 02:07:47.52ID:??? ほんとですね・・。 (function($) {})(jQuery); で括っていたのが良くなかったのかもしれません。 もう少し基礎から勉強します。ありがとうございました。 : Name_Not_Found [sage] 2017/06/01(木) 03:59:08.74ID:??? > (function($) {})(jQuery); > で括っていたのが良くなかったのかもしれません。 まったく関係ない プラグインの作成自体はよっぽど変なものでない限り、 jQuery読み込みのあとならどこでも良い。もちろん<head>でもよい ただ<head>に書くなら(正確に言うならば<タグ id="#test">登場以前に書くなら) $(function() { // Document is ready }); を使わないとDOM構築前に実行されてしまうから見えないだけ : Name_Not_Found [sage] 2017/06/01(木) 04:04:15.17ID:??? あとな、例外的なプラグインもあるからあえて言わなかったんだが、 $('#test').test(); だけではなく、$('.test').test(); こういう風に 複数の要素にマッチする場合でも逆に全くマッチしない場合でも動くように作るのが良い そしてチェーンできるようにするべき だからこのサンプルのように、複数の要素に対して処理を適用してreturn thisするのが王道 ※プラグインにおいてthisはDOM要素ではなくjQueryオブジェクトであることに注意 つまりのように$(this)とする必要はない ttps://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. }); }; : 630 [sage] 2017/06/01(木) 11:46:11.25ID:??? 詳しくありがとうございます。 $(this)としていたのは、ID名をどうやって取得するのか?と思ったもので。 それで var id = $(this).attr('id'); こういう書き方自体は間違いではないのかな?っと。 var id = this.attr('id'); こういう書き方の方が良いんですかね。 : Name_Not_Found [sage] 2017/06/01(木) 12:56:47.19ID:??? この場合はthisでええんやで$()は不要 通常のDOMオブジェクトではなくてjQueryオブジェクトで参照されるから : 630 [sage] 2017/06/01(木) 13:08:20.97ID:??? わかりました。ありがとうございます。 引き続き勉強していきたいと思います。 : Name_Not_Found [sage] 2017/06/01(木) 20:19:30.60ID:??? どうにでもできるし、楽さはどれもさほど変わらない 自分がどうしたいかだけで毎回取得したいならそうすればいい 常に最新データを求めるならそうすべきで、その必要がないのなら冗長 サーバサイドならPHPの方が楽だしセキュリティ上有利 : Name_Not_Found [sage] 2017/06/01(木) 22:32:10.84ID:??? tableタグでクリックされた要素の次に来る要素をセレクタとする場合、 trをまたいでいる場合の簡単な指定方法はありますか? ↓でthをクリックしたらtdを選ぶ。としたいです。 <table> <tr> <th>...</th> </tr> <td>...</td> <tr> </tr> </table> : Name_Not_Found [sage] 2017/06/01(木) 23:02:43.42ID:??? > クリックされた要素の次に来る要素をセレクタとする場合、 セレクタってなんですか? : Name_Not_Found [sage] 2017/06/01(木) 23:51:03.91ID:??? tdの位置が明らかに文法違反 セレクタ云々も用語の不理解が見られる と同じ指摘をする必要がありそうどな : Name_Not_Found [sage] 2017/06/02(金) 00:11:08.51ID:??? のいうように文法おかしいけど tableを起点で参照 $(this).closest('table').find('td'); 親のtrから参照 $(this).closest('tr').next('tr').find('td'); : Name_Not_Found [sage] 2017/06/02(金) 00:19:39.93ID:??? 素晴らしいセレクタありがとうございます。 : Name_Not_Found [sage] 2017/06/02(金) 00:37:29.68ID:??? jQuery APIの事をセレクタと表現してるのか セレクタの意味を調べ直すべきだな : Name_Not_Found [sage] 2017/06/02(金) 13:52:49.11ID:??? jQuery 1.9 の、CSS Selector ttp://js.studio-kingdom.com/jquery/selector/ ここを見ろ : Name_Not_Found [sage] 2017/06/02(金) 23:01:56.26ID:??? ここを見たぞ ここって書いてある : Name_Not_Found [sage] 2017/06/02(金) 23:03:25.68ID:??? HTMLはjQueryより難しいからな よく見直せ : Name_Not_Found [sage] 2017/06/09(金) 21:25:28.63ID:??? 便乗質問なのですが、$(・・・)のいらないthisだけでいい「この場合」とはどういう場合をさすのでしょうか? : Name_Not_Found [sage] 2017/06/10(土) 06:34:55.25ID:??? jQuery.prototype 上の関数の場合 : Name_Not_Found [sage] 2017/06/10(土) 20:46:25.50ID:??? すみません、難しいス : Name_Not_Found [sage] 2017/06/11(日) 12:26:03.87ID:??? jQuery.prototype.functionName jQuery.fn.functionName : Name_Not_Found [sage] 2017/06/11(日) 15:02:53.69ID:??? わざと難しくしてるか説明できないか いずれにしろ性格悪いのは間違いなさそう : Name_Not_Found [sage] 2017/06/11(日) 16:10:12.41ID:??? $.fn.myMethod = function() { console.log(Object.getPrototypeOf(this)); }; : Name_Not_Found [sage] 2017/06/11(日) 23:21:14.27ID:??? 説明できないならそう書けばいいのにな : Name_Not_Found [sage] 2017/06/11(日) 23:35:04.35ID:??? くだらないことやってんなw 俺が終わらせてやるよ。 JavaやC#のクラスベースと呼ばれるオブジェクト指向の thisはクラスのインスタンス自身と明確に決まってる。 だけどJavaScriptの場合そうとは限らない。 thisは呼び出し方で決まる。 obj.foo() と呼び出せば、fooの中でthisはobjになるし、 obj.foo.call(data) と呼び出せば、fooの中でthisはdataになる つまり「この場合」とは "呼び出し側" の "呼び出し方" で決まる。 "呼び出され側" ではないことに注意な。 単純なライブラリであれば通常は、"呼び出し側" は俺らで書くことが多いが ライブラリのプラグイン用のような仕組みや、イベントハンドラでは、 "呼び出し側" はライブラリ側が担当し、俺らは "呼び出され側" を書くことになる。 その場合に、 "呼び出され側" でthisがどうなるかは "呼び出し側" のライブラリの仕様によるというわけだ 今回の「この場合」とはjQueryのプラグインの場合は、 thisが jQueryオブジェクトになるとjQueryの仕様で決まっている : Name_Not_Found [sage] 2017/06/12(月) 00:02:50.97ID:??? 長い : Name_Not_Found [sage] 2017/06/12(月) 00:06:59.25ID:??? それぐらい読めるようになれ : Name_Not_Found [sage] 2017/06/12(月) 01:50:38.88ID:??? 要点をまとめなさい : Name_Not_Found [sage] 2017/06/12(月) 02:29:14.48ID:??? 意味がない : Name_Not_Found [sage] 2017/06/12(月) 02:40:23.85ID:??? >>くだらないことやってんなw 俺が終わらせてやるよ。 www : Name_Not_Found [sage] 2017/06/12(月) 02:53:49.13ID:??? 本当に終わったな。 見事に別の話にすり替わっとるw : Name_Not_Found [sage] 2017/06/12(月) 03:03:05.67ID:??? 説明下手すぎ : Name_Not_Found [sage] 2017/06/12(月) 03:11:13.56ID:??? 嫉妬ぱねぇw : Name_Not_Found [sage] 2017/06/12(月) 03:12:20.69ID:??? どこにでも長々説明下手いるだろうに一々きにするなよ : Name_Not_Found [sage] 2017/06/12(月) 03:18:57.86ID:??? 長い説明見ると頭痛くなるんだよ : Name_Not_Found [sage] 2017/06/12(月) 12:35:25.18ID:??? ,657 これが「煽っても無駄」というあれか 曖昧な質問にはヒントとなるキーワードやURLだけを返す そういう質問者は大抵、「質問した内容以上に基礎知識が身についてない」ので、詳しい説明は時間の無駄と考えるからだ (与えたヒントからそれなりに質問内容が絞り込んだ質問に発展するなら、その時にまた考えるがね) だから、質問が具体的かつ分からない箇所が十分に小さな範囲なら、より詳しく回答する 実際のところ、が十分なヒントを与えてくれていると思うけどな それでも分からないなら、prototypeチェーンでぐぐれ(To: ) : Name_Not_Found [sage] 2017/06/12(月) 13:05:23.75ID:??? 愚痴みたいだな : Name_Not_Found [sage] 2017/06/12(月) 15:26:53.57ID:??? console.log($.fn.jquery); console.log($().jquery); : Name_Not_Found [sage] 2017/06/12(月) 22:19:29.64ID:??? だが他は説明とは言えない : Name_Not_Found [sage] 2017/06/12(月) 22:23:30.67ID:??? ここは質問スレ これだけヒントを出して貰っていればで十分だろ? というか、ちょっと検索すれば学習できることだが : Name_Not_Found [sage] 2017/06/12(月) 22:28:52.11ID:??? お前が決めることではない : Name_Not_Found [sage] 2017/06/13(火) 21:24:44.87ID:??? 回りくどい $(・・・)の場合→ thisだけでいい場合→ それだけ : Name_Not_Found [sage] 2017/06/13(火) 21:33:25.78ID:??? それだけってお前何も書いてないやんw 重要なのは→の右側だろ : Name_Not_Found [sage] 2017/06/13(火) 23:48:21.39ID:??? 普段行いの悪い人には見えないんだよ : Name_Not_Found [sage] 2017/06/13(火) 23:50:50.42ID:??? 口だけみたいだな : Name_Not_Found [sage] 2017/06/14(水) 09:17:59.13ID:??? ,656で答えは出てるんじゃないの? : Name_Not_Found [sage] 2017/06/14(水) 22:54:37.41ID:??? 答えになってると思うとこが逆にすごいな : Name_Not_Found [sage] 2017/06/14(水) 23:31:28.41ID:??? レベル低いのがよくわらく : Name_Not_Found [sage] 2017/06/15(木) 00:53:33.77ID:??? ヒントは出ているが、それを理解する頭がないか、質問を具体化する頭がないか、のどちらか : Name_Not_Found [sage] 2017/06/15(木) 02:19:51.20ID:??? 声闘乙 : Name_Not_Found [sage] 2017/06/15(木) 21:18:28.21ID:??? 自分がわかるから相手もわかると思ってるのだろうな 後輩やら持ったことないのだろう : Name_Not_Found [sage] 2017/06/15(木) 21:49:21.99ID:??? 本当に理解しようと思う人には十分答えになっている しかし、教えてくれくれ厨にはこのヒントはこたえるよな : Name_Not_Found [sage] 2017/06/15(木) 22:19:42.57ID:??? ジコマンオツ : Name_Not_Found [sage] 2017/06/15(木) 22:27:49.58ID:??? 答えられないのを濁してるのだろ : Name_Not_Found [sage] 2017/06/15(木) 22:28:33.03ID:??? スマン抜けてた 「わかりやすく」答えられないのを濁してるのだろ : Name_Not_Found [sage] 2017/06/16(金) 02:04:28.26ID:??? 自己満足したか : Name_Not_Found [sage] 2017/06/16(金) 13:52:40.04ID:??? 後輩と見知らぬ他人に教えるのでは全く状況が違うが、6>84は後輩に教えた経験があるのかね… 通常、後輩を教育する時には後輩の理解度を図る質問をしてから、基礎から段階を踏んで覚えさせる だから、のような曖昧な質問はさせないし、そんな質問が来たら説教ものだ の「難しい」も具体化出来てないから、質問として成り立ってない 基礎から質疑応答を繰り返して覚えさせるのは相当時間がかかるが、後で仕事で返して貰うための投資なのでそれはいい が、赤の他人にそこまでやる義理は全くない 「で、君はどこまで分かってるんだ?」「prototypeは分かるか?」「関数は分かるか?」「今まで何を学習した?」 そんなやりとりを繰り返して質問者を答えに導くのは、このスレの役目ではないと思うんだがね : Name_Not_Found [sage] 2017/06/16(金) 14:55:41.83ID:??? Object.getPrototypeOf(this); これを理解出来ない時点で何を説いても無駄 : Name_Not_Found [sage] 2017/06/16(金) 21:05:23.10ID:??? > だから、のような曖昧な質問はさせないし、そんな質問が来たら説教ものだ じゃあためにし、説教してみてよ? 自分で説教ものだっていったんだから 当然できるよね? お前のレスみてると、なんかお前の説教のレベルが低い気がするんでねw : Name_Not_Found [sage] 2017/06/16(金) 22:30:02.23ID:??? 教える気ないだろw : Name_Not_Found [sage] 2017/06/16(金) 23:24:27.86ID:??? 誰からも相手にされない基地外みたいな輩だな : Name_Not_Found [sage] 2017/06/17(土) 13:41:22.35ID:??? 「赤の他人にそこまでする時間はない」とはっきりいわなければ伝わらないのか なぜ2chで家庭教師なみに一人の人に教えこまねばならんのだ 俺はそんな時間はないが、文句があるなら暇なあなたが説明すればいいんじゃないかね それとも、あなたは質問者本人なのか? : Name_Not_Found [sage] 2017/06/17(土) 13:51:16.62ID:??? 伝わらないに決まってるだろ。 最初からそう言えや。 Q 「○○をするにはどうしたら良いですか?」 A 「赤の他人にそこまでする時間はない」 って答えてればいいだろ : Name_Not_Found [sage] 2017/06/17(土) 18:56:43.75ID:??? > 伝わらないに決まってるだろ。 「赤の他人にそこまでやる義理は全くない」をあなたが読み飛ばしただけ > Q 「○○をするにはどうしたら良いですか?」 > A 「赤の他人にそこまでする時間はない」 この書き方だと質問全般に回答しないように読めるが、質問者の理解度が分かる質問をすれば、答える 問題点を明確化しても内容を全く読まずに「回答しない」という都合が悪い事実だけを取り上げてあなたは煽ってるだけ 日本語の読解力を身に付ける事をお勧めする : Name_Not_Found [sage] 2017/06/17(土) 19:00:16.34ID:??? あと、繰り返すようだが、他人を煽り散らす暇があるなら、あなた自身が回答しろ 俺は回答しない理由を釈明したが、あなたは回答するべきだという あなたがそういうなら、他人任せにせず、あなた自身が解決に向かうように自分から働きかけるべきだ : Name_Not_Found [sage] 2017/06/17(土) 19:53:54.93ID:??? 質問をするのは勝手だけど思い通りの解答を期待するのは間違い ヒントでもレスくれるだけ有り難いと思いなさい : Name_Not_Found [sage] 2017/06/17(土) 23:32:59.27ID:??? 質問者です。ありがとうございます、そして遅くなりすみません 「 "呼び出し側" のライブラリの仕様によるというわけだ」まではわかります インスタンスもなんとなくですが ただ$(・・・)有無、区別が曖昧というか理解度が浅いようです で、は質問者ではないです : Name_Not_Found [sage] 2017/06/17(土) 23:35:00.50ID:??? jQueryの話だろ? イベントハンドラ内のthisはDOM要素 ぐらいしか意識することはないぞ。 jQueryプラグインなんて普通書かないだろ? jQueryプラグインの場合はthisがjQueryオブジェクトってだけだ。 : Name_Not_Found [sage] 2017/06/18(日) 00:10:02.56ID:??? >jQueryの話だろ? そうです ネイティブjsも書きますがjQでの質問です >jQueryプラグインなんて普通書かないだろ? 書きません : Name_Not_Found [sage] 2017/06/18(日) 08:34:09.21ID:??? : Name_Not_Found [sage] 2017/06/18(日) 08:37:09.16ID:??? this は何を差すのか?それだけ バカ : Name_Not_Found [sage] 2017/06/18(日) 09:36:23.54ID:??? こういう最低なのがいると過疎化するぞ : Name_Not_Found [sage] 2017/06/18(日) 10:34:47.52ID:??? 巣にお帰りください : Name_Not_Found [sage] 2017/06/19(月) 16:44:25.11ID:??? セレクタが従兄弟関係にあれば処理って無理? 特定のクラスがあって、親に遡り、その兄弟の子供に 処理を加えたい つまりイトコ。ググっても出てこないんだよな… : Name_Not_Found [sage] 2017/06/19(月) 17:32:33.62ID:??? 兄弟 = $(特定のクラス).closest(親); 兄弟.children(); : 707 [sage] 2017/06/19(月) 18:01:03.60ID:??? ありがとうやってみます : 707 [sage] 2017/06/19(月) 18:17:31.67ID:??? さん 納得行く結果に辿りつきましたありがとう( TДT) 2ちゃん住人最強( TДT) : Name_Not_Found [sage] 2017/06/21(水) 21:49:05.78ID:??? しら〜 : Name_Not_Found [sage] 2017/06/22(木) 22:09:30.37ID:??? しらじらしいし自演ぽいし : Name_Not_Found [sage] 2017/06/22(木) 22:53:35.62ID:??? またわいてるのか声闘 : Name_Not_Found [sage] 2017/06/23(金) 02:46:44.26ID:??? 自演を疑うやつは、だいたい劣等感が強くひがみ根性が強いやつ そういうやつは感謝された人間や、称賛を浴びた人間を目ざとく思う 事もあろうに素直に客観でみれず難癖をつけだす始末 なぜ、そう思うか?私がそうだからである 自分で盛り上げるネタもないやつが偉そうに 単発批判してんじゃねーぞカス IDつかないスレで自演とかナンセンスなこといってる愚かさに気づけよw : Name_Not_Found [sage] 2017/06/24(土) 07:20:15.22ID:??? もうこいつ病気だな : Name_Not_Found [sage] 2017/06/24(土) 21:54:47.52ID:??? 最後の行はそう思われてもしかたない : Name_Not_Found [sage] 2017/06/24(土) 21:55:27.28ID:??? の最後の行は : Name_Not_Found [sage] 2017/07/03(月) 20:55:04.28ID:??? 相変わらずここは・・ ヒント、回答とか言ってるわりにずれてるし 質問者のほうがレベル上では : Name_Not_Found [sage] 2017/07/03(月) 22:22:45.55ID:??? どうせお前このスレを荒らしに来ただけだろ? 数日間レスが止まってるところに、誰宛かも わからないこと書き込んで。ばればれ : Name_Not_Found [sage] 2017/07/04(火) 20:14:27.05ID:??? 荒れたからとて面白くもないし何得だよ : Name_Not_Found [sage] 2017/07/04(火) 22:36:50.75ID:??? 似たようなオブジェクト2つを変える関数を作っています。 仮に2つは$('#hoge-L')と$('#hoge-R')とします。将来的に2つを超えることはありません。 実際は様々な処理をしていますがここでは説明のため色を変えるだけとします。 様々な処理と言ってもLとRの違いだけで関数内の他は同じコードで共通化しています。 実際は色を変える関数、○○を変える関数など多数あり、全てLとRを操作します。 LとRは、片方だけ変えることも両方変えることもあります。 LとRの変更色は同じ場合も違う場合もあります。 で、とりあえずは function changeColor(args,c){ $('#hoge-' + args).〜cに色変更; } changeColor('L',c1); としましたが両方変える場合 changeColor('R',c2); と2回呼び出さなくてはなりません。 これを1回呼び出しにしたいのですがどんな方法がいいでしょうか。 : Name_Not_Found [sage] 2017/07/04(火) 22:42:57.07ID:??? 721の続き (1)配列渡し changeColor(['R',c2]); changeColor(['L',c1,'R',c2]); (2)引数を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)その他 皆さんならどうしますか。 : Name_Not_Found [sage] 2017/07/04(火) 23:58:52.10ID:??? idなしかよ $('#hoge-'+args) じゃなくて $(arg) にして "#hoge-L,#hoge-R" を渡すってわけにはいかんのかね : Name_Not_Found [sage] 2017/07/05(水) 08:05:18.17ID:??? changeColorなどを実行するのに何かしらのイベントがあるとして >LとRは、片方だけ変えることも両方変えることも とのことだから、「LとRそれぞれ操作 or LとR同時に操作」に対応したイベント発火ボタン要素みたいなものが複数あるパターンとすると ttps://jsfiddle.net/wd8gzh70/ : Name_Not_Found [sage] 2017/07/05(水) 23:51:31.49ID:??? で? : Name_Not_Found [sage] 2017/07/06(木) 00:21:57.01ID:??? 修正中だった? 割り込んでごめんw 俺ならこうする ttps://jsfiddle.net/wd8gzh70/3/ コード(処理)をごちゃごちゃ書きたくなく。 単なる定義(CSS)にすることでシンプルになる。 CSSが苦手な人は、CSSの量が増えるのが嫌だろうけどw で、こっちはCSSをSCSSに変えて短くしたもの ttps://jsfiddle.net/wd8gzh70/4/ : 726 [sage] 2017/07/06(木) 00:34:11.64ID:??? LとRに両方に必ず同じものを適用するのでないなら 単純に二回呼び出したほうが良い。 そしてを取り入れた方がいい。 そうすれば、両方とも同じなら一回でいい それから○○を変える関数とは全部CSSの内容か? どんな処理をしたいのかによるがを参考に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(パラメータ) と書けるようにもできる。 : Name_Not_Found [sage] 2017/07/06(木) 03:33:41.21ID:??? CSSってCSSソース中のプロパティそのものを動的に変更できるのかな 例えば.hoge{color:#ff0000;}のCSSソースがあって javascriptでCSS.class.hoge.color=#00ff00みたいに : Name_Not_Found [sage] 2017/07/06(木) 04:09:21.86ID:??? それならjs一行で解決たな。 その程度ならjQueryよませる必要なし遅くなるだけだよ。 : Name_Not_Found [sage] 2017/07/06(木) 05:32:29.96ID:??? element.style.colorじゃなくCSS(仮).class.hoge.color できたら便利だけどさすがに無理か : 721 [sage] 2017/07/06(木) 21:22:11.95ID:??? すみません、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両方変更の一例は全リセットをイメージしていただけるとわかりやすいかもしれません。 各関数の目的は見通し上おおまか1つにしています。 >"#hoge-L,#hoge-R"を渡す 発火したselectのidの一部を渡してるだけですのでそれでもいいです。 それとCSSは::after駆使して複雑な図形描くなどでなければ特に苦手ではないです。 : 721 [sage] 2017/07/06(木) 21:50:43.24ID:??? >○○を変える関数とは全部CSSの内容か? 位置変更(jsで取得してjsで再設定)などもあります。初期位置はCSSですが動的に変更があります。 >changeColorなんて関数はいらないだろ? 他の部分数箇所から各関数の1つないし複数を呼び出しています。 >$('#hoge-L, #hoge-R').hogehoge(パラメータ) LRそれぞれのパラメータを全部連想配列にしてしまえば手っ取り早いですが、1つの変更だけで全部見るのも不自然さや速度面でどうかと今のようになっています(他にも理由あったような)。 2回呼び出しの頻度は各々呼び出しに比べれば少ないので前者でいいのかもしれませんね。 : Name_Not_Found [sage] 2017/07/07(金) 07:31:05.36ID:??? エスパーするとやりたいことはこんなところだろうか ttps://jsfiddle.net/wd8gzh70/6/ : Name_Not_Found [sage] 2017/07/07(金) 09:32:48.11ID:??? > LRそれぞれのパラメータを全部連想配列にしてしまえば手っ取り早いですが、 一番やってはいけないパターン : Name_Not_Found [sage] 2017/07/08(土) 23:50:44.78ID:??? 別に関数内でそれ呼んでもよくね? : Name_Not_Found [sage] 2017/07/09(日) 21:09:10.52ID:??? 関数は「何をどうする」 「何を」をどうするか聞かれてるのに「どうする」をゴチャゴチャやってるのはなぜなのかな 引数の渡し方について質問者についていけてないのかな : Name_Not_Found [sage] 2017/07/09(日) 21:58:42.73ID:??? 解答になっていない : Name_Not_Found [sage] 2017/07/09(日) 23:50:06.38ID:??? それ言ったら全てそうだ 選択問題なのにどれも答えてないな : Name_Not_Found [sage] 2017/07/10(月) 01:08:31.55ID:??? 煽りばかりですな 以降は例外無く口出ししたくなる基地外のターン↓ : Name_Not_Found [sage] 2017/07/10(月) 06:52:25.80ID:??? てかもう答え出てて終了してんだと思ってた : Name_Not_Found [sage] 2017/07/10(月) 21:14:01.65ID:??? 赤青黄のどれ? 答えま〜す犬です! : Name_Not_Found [sage] 2017/07/10(月) 21:51:27.72ID:??? 質問者>>>回答者 いつも通りw 質問文読んでないし可変長引数とか意味わからないんじゃね : Name_Not_Found [sage] 2017/07/11(火) 16:15:32.66ID:??? 質問を熟読したさんが回答してくれるそうですワクテカ : Name_Not_Found [sage] 2017/07/12(水) 19:31:51.31ID:??? ぶっちゃけどれも似たり寄ったり (4)はfunctionが増えて利点はないだろう それよりの回答はどうなった? : Name_Not_Found [sage] 2017/07/13(木) 21:29:10.73ID:??? うむ、ここでは説明のため色を変えるだけとしますと書いてるんだから 渡した先のことはさほど書く必要ないんだよな 相手はそれくらいわかるだろ : Name_Not_Found [sage] 2017/08/20(日) 01:58:51.79ID:??? TVで報道されない真実 集計マシーン ムサシ 作ってる会社は? wwww 一番触れられたくない部分www 税金垂れ流しで身内がばぶってる糞安倍特需 : Name_Not_Found [sage] 2017/09/05(火) 18:23:52.13ID:??? boxsliderについて質問です。 すでにsliderが設定されてる画像データがあります。 タブは6つで、それぞれにsliderが設定されてる画像データがあります。 そこに ajaxで取得してきた新たなデータをおきかえて表示したいです。 1つめのタブはちゃんと表示されましたが、 後ろに隠れているタブのデータが表示されません。 この場合何か再設定をしないといけなかったりするのでしょうか? : Name_Not_Found [sage] 2017/09/07(木) 11:05:47.85ID:??? jQuery プラグインの、bxSlider でも使えば? 【jQuery】超簡単jQueryスライダー[bxSlider]の使い方 ttp://on-ze.com/archives/1658 : Name_Not_Found [sage] 2017/09/14(木) 09:11:48.72ID:??? ajax通信について教えてください。 以下のスクリプトを組んでいるのですが、通信が完了しているにも関わらず、 completeのalertが実行されません。 <スクリプト> $.ajax({ (略) success: function(data) { $('#result').html(data); (略) complete: function() { alert("終了"); } サーブレット側では、 response.getWriter().write("完了しました。"); にてメッセージを送信し、jsp側のdivである#resultにて表示がされているので 通信は正常に行われていると思います。 しかし、completeが実行されていないということは、サーブレットからの メッセージを受信した状態であっても通信が完了していないと みなさえれているということでしょうか。 原因がわからず、困っております。 宜しくお願いします。 : Name_Not_Found [sage] 2017/09/14(木) 21:56:50.83ID:??? スペルでも間違ってんだろ : Name_Not_Found [] 2017/09/18(月) 12:48:58.72:NiWWbHxC 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)など)教えてください。 : Name_Not_Found [sage] 2017/09/18(月) 13:01:48.87ID:??? show と hide という単語は使わない。 メソッド名、クラス名、両方の意味でだ showに相当するものは、display: block等だし hideにそうとするものは、display: noneなのだから メソッド名やクラス名にshowやhideを使う必要はない JavaScriptでは "状態" で考えろ JavaScriptは状態(クラス)を変えるだけだ CSSではある状態で、表示するかどうかを書くだけだ : Name_Not_Found [sage] 2017/09/18(月) 13:05:25.05ID:??? 初期値は、チェックボックスであれば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; } : Name_Not_Found [sage] 2017/09/18(月) 16:34:15.44ID:??? それは典型的ダメパターン 再読み込みで前の状態が残る場合がある : Name_Not_Found [sage] 2017/09/18(月) 16:37:46.52ID:??? 加えて言うと、checkedは一応記述しておくがな それと変更をどうするかなので全く答えになってない : 751 [sage] 2017/09/18(月) 17:19:32.91ID:??? 単語はわかりわすく書き換えたまでです。 >showに相当するものは、display: block等だし >hideにそうとするものは、display: noneなのだから 承知です。途中overflowが入ることも。 : Name_Not_Found [sage] 2017/09/18(月) 17:25:37.51ID:??? > 再読み込みで前の状態が残る場合がある なんで残ったらダメんだよ? ブラウザでバッグしても残るだろうが : Name_Not_Found [sage] 2017/09/18(月) 18:18:04.06ID:??? は?何言ってるんだコイツ ダメに決まってるだろ 初期化の意味なし : Name_Not_Found [sage] 2017/09/18(月) 19:15:42.55ID:??? 答えてるほうがレベル低いって・・・ : Name_Not_Found [sage] 2017/09/18(月) 21:26:35.88ID:??? > ダメに決まってるだろ お前が決めただけだろ? ページ内のある範囲や部品を表示・非表示っていうのは 例えばショップの商品絞込機能と同じなわけだが、 リロードしても今絞り込んでる条件なんか変わらねーよ : Name_Not_Found [sage] 2017/09/18(月) 21:38:36.93ID:??? 残るか残らないかって確実に決まるんだっけ? リロードで確実に残したいものはちゃんとルーティングするかなぁ : Name_Not_Found [sage] 2017/09/18(月) 21:50:57.09ID:??? httpヘッダなどでも決まるよ。 基本ブラウザで制御させる部分だから自分で(JavaScript)で 制御するのはやめてブラウザに任せたほうが良い。 一番ダメなのはフォームとフォームでない部分を混ぜること 独自のチェックボックス風のものをJavaScriptで自作とかしたりしてね。 そうすると画面の見た目とJavaScriptの処理結果がずれることになる。 なんでだーといいながら、ページ表示時にJavaScriptで値を入れたり ページの進むと戻るしたときにおかしくなって、 setTimeoutとかで強制的に再描画とかして泥沼に陥ることになるw こういうのは状態の保持にフォームを使わないから。そしてフォームの値で 見た目をCSSで変更させないから。 一部にJavaScriptを使ったとしても、input type=hiddenなどを使って、 状態の保持にフォームを利用しておけば、確実にブラウザの挙動に 従わせることができるので、シンプルに実装することができる。 JavaScriptも使わずに実装できるので、フォームの値と画面の見た目がずれることもない。 : Name_Not_Found [sage] 2017/09/18(月) 21:54:45.75ID:??? それからフォームの内容をリセットしなければ、 まさにフォームのリセット機能が存在するので ( input type="reset" or form.reset() ) 実は画面のリロード時に確実にフォームをリセットするのも フォームを使っていたほうが簡単だったりする。 : Name_Not_Found [sage] 2017/09/18(月) 21:55:17.81ID:??? > 答えてるほうがレベル低いって・・・ ゴメンな答えるほうがレベル高くてw : Name_Not_Found [sage] 2017/09/18(月) 22:00:18.11ID:??? 一つ言い忘れていた。 > 残るか残らないかって確実に決まるんだっけ? の話だけど、これは要するに HTMLを修正した時、更新ボタンで画面に変更が反映されるか? と同じ話なんだよ。 つまりキャッシュ。ブラウザの設定にもよるけど通常は キャッシュが有効に使われる状態であれば、更新ボタンを おしても前の画面は変更されないだろう? ならばフォームの値もそのままなのは当然のこと。 そしてスーパーリロードだとキャッシュが使われる状態でも リロードされる。フォームの値もリセットだ。 つまり更新を押してもフォームの値が残るっていうのは バグでも何でも無く、ブラウザの機能なわけさ。 : Name_Not_Found [sage] 2017/09/19(火) 12:13:27.05ID:??? success, complete は、古いのかな? 今は、done, fail とか。 ヌーのサイトの情報は、古いから、気を付けな // 全体の設定 $.ajaxSetup({ data: {format: 'xml'}, timeout: 60 * 1000 }); $.ajax( url ) .done(function( data, textStatus, jqXHR ) { }) .fail(function( jqXHR, textStatus, errorThrown ) { }); : Name_Not_Found [sage] 2017/09/19(火) 19:25:48.75ID:??? 初期値はブラウザによって不確定だからタチ悪い よってCSSかJSでイニシャライズが必要 で、問題は変更の方法だろ CSSでdisplay:none;としておきたいとこだがaddClassだと!important使わないと、 またshow()の類でないと、ってとこがミソなんだよな : Name_Not_Found [sage] 2017/09/19(火) 20:10:08.76ID:??? フォームのリセットはリセットすればいいだけだから別によかろう。 クラスの付け方と変え方をどうしてる?って話なのにな。 : 751 [sage] 2017/09/19(火) 21:25:42.52ID:??? form操作により、と書きましたがそれ以外に関連したりしなかったりで表示・非表示があります。 よって再表示で >制御するのはやめてブラウザに任せたほうが良い。 >再読み込みで前の状態が残る は困る部分もあります。formとは分けてます。後だしですみません。 >独自のチェックボックス風のものをJavaScriptで自作 そんなことはしてません。一応。 : Name_Not_Found [sage] 2017/09/19(火) 23:31:01.47ID:??? > 初期値はブラウザによって不確定だからタチ悪い それを言ったら進むや戻るを押したときだって ブラウザ依存なんだが。 不確定なんじゃなくて、キャッシュが使われると言うべき。 キャッシュはブラウザの設定でユーザビリティ向上のために 使われるものなので、それを無効にする方向じゃなくて 活かす方向で作るべきだよ : Name_Not_Found [sage] 2017/09/19(火) 23:34:08.08ID:??? > は困る部分もあります。 そもそも困る作り方なのが悪い。 でも書いたが、例えばブラウザの設定で キャッシュを出来る限り使う設定にしていれば JavaScriptの状態が保存されることも有る。 保存されないことも有る。 そういったことを制御するのは大変。 今回の話でいえば単にリロードしても状態は残る (正確に言えばブラウザの設定にもよる)わけだが それで困ることはないだろ。通常はリロードしても フォーム内容は維持されるものなんだから : Name_Not_Found [sage] 2017/09/19(火) 23:39:01.50ID:??? > CSSでdisplay:none;としておきたいとこだがaddClassだと!important使わないと、 > またshow()の類でないと、ってとこがミソなんだよな !importantを使うのは作り方が悪い。 適切にaddClassを使えば、クラスを設定した時点で もとの状態よりも優先順位の点数があがるので!importantなんか 使わずに作れる。 行き当たりばったりでスタイルを適用してるから わけわからんくなるんだよ。 : Name_Not_Found [sage] 2017/09/20(水) 19:26:59.59ID:??? だから何としか 見たことないのに行き当たりばったりって わけわからなくもなってないのだが : Name_Not_Found [sage] 2017/09/20(水) 19:27:52.53ID:??? →. : Name_Not_Found [sage] 2017/09/20(水) 21:34:42.91ID:??? 君が小規模なコードしか書いたことないことはよくわかった。 : Name_Not_Found [sage] 2017/09/20(水) 22:07:18.85ID:??? 基本addClassでいいと思うが(質問者もそれくらいわかってるかと) 大規模になって1つの要素に複雑にクラスがからむ場合、タグが <hoge class="aaa bbb ccc ddd・・・> となってくるからな 表示関係、見た目デザインはSSで管理したいのもわかる その要素の他の操作(値操作など)、他の要素の操作などもJS(JQ)でいじってるのだし (1)でも悪くはないと思う : Name_Not_Found [sage] 2017/09/20(水) 22:36:05.11ID:??? ある程度は仕方ないが、HTMLはなるべくコンテンツにしぼって 操作するため装飾するためのidやclassだけにしたいな。 くどいがなるべくだがね。 : Name_Not_Found [sage] 2017/09/20(水) 22:51:39.31ID:??? JQのshow()などでいじるにしても簡単な部分はaddClassで行ってもいい 問題はその線引き、というかそれが元々の質問だろ 前振り長かったな〜 : Name_Not_Found [sage] 2017/09/20(水) 23:18:53.96ID:??? とか まあ実際にコードを示さないと、どれだけシンプルに 作れるかってのがわからんのだろうな(苦笑) と思ったねw まずこっち。JavaScriptのコードは一切ない ttps://jsbin.com/nozotuyaci/edit?html,css,output これの何が良いかというと、表示非表示をする"処理"がなくて HTMLとCSSによる"定義"のみで表しているということ 定義なので「こういう場合」は「こうなる」ことがはっきりしているので 〜してから〜するみたいな条件を織り交ぜた流れがなくなるのでバグが少なくなる ただこのやり方には欠点があって今のCSSは親要素を参照とかできないので HTMLの構造に制約が出る。 : Name_Not_Found [sage] 2017/09/20(水) 23:24:03.41ID:??? それを改善したのがこっち ttps://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などに値を入れるやり方もある。 だけどこっちもフォームと混ぜた時に、リロードで値が残ったり 残らなかったりするので気をつけないといけない。 : Name_Not_Found [sage] 2017/09/20(水) 23:29:13.57ID:??? あと今はリロードの話しかしていないが、もう一つ気をつけないといけないのが ブラウザの進むと戻る ttp://nmi.jp/archives/273 > スマートフォンを含む最近のブラウザでは、戻るボタンで前のページに戻った際に、 > JavaScriptも含めて前回の最後の状態を復元します(Back Forward Cacheと呼ばれます)。 onunloadに何か入れていれば無効になるとは言え、 なぜこんな機能があるかというと、そっちの方がユーザビリティが高いから。 せっかく高くしてくれたユーザビリティを低下されるのは悪いやり方。 その場合、戻るを押した時にキャッシュされるかどうか?なんて いちいち考えたくないだろう? 一番楽な方法はブラウザの標準の挙動に合わせる方法。 フォームだけで実現する または input type="hidden" に入れていれば フォームの状態が残ってようが残ってまいが、そんなことは気にせずに 現在の状態という定義から簡単に画面を導出できる : Name_Not_Found [sage] 2017/09/20(水) 23:42:07.64ID:??? 今回の話は前提として より > ユーザーがform操作によりページ内のある範囲や部品を表示・非表示。 フォームを使う > form操作により、と書きましたがそれ以外に関連したりしなかったりで表示・非表示があります。 > よって再表示で > > >独自のチェックボックス風のものをJavaScriptで自作 > そんなことはしてません。一応。 フォーム以外も使う。フォームを全く使わないということはない。 ということから、フォームとそれ以外が混じってるという点 つまりブラウザやその設定にもよるがリロードした時や進む・戻るを押した時に フォームの値は残ってるがJavaScriptの描画結果はリセットされているなどという不整合が 起きる可能性がある。困ったことにこの挙動はブラウザ依存 不整合を起こさないためにはどちらかに統一する。フォームを全く使わないことはありえないので フォームを使う方で統一する。なので状態をフォームの値として input type="hidden"にいれておけば、 不整合は発生しない。一律にフォームの内容をリセットするというのもあるがこれはユーザビリティの低下を招く。 : Name_Not_Found [sage] 2017/09/21(木) 03:32:30.43ID:??? cssもこんなことに hoge { プロパティ: 値; プロパティ: 値; プロパティ: 値; ・・・ プロパティ: 値; } ↓ hoge { プロパティ: 値; プロパティ: 値; プロパティ: 値; } .aaa {プロパティ: 値;} .bbb {プロパティ: 値;} .ccc {プロパティ: 値;} ・・・ .xxx {プロパティ: 値;} クラスが何十にもなると上書きも出てきて視認性が落ちかねない ライブラリも使っていれば!importantを使わざるをえない場合もある jQueryなら1行で書ける上にメソッド見れば状態も一目瞭然 何が何でもaddClassだけで済ますのも悪いとは言わないが 保守性からもそれだけにこだわるのは賢明とは思えない : Name_Not_Found [sage] 2017/09/21(木) 03:55:24.74ID:??? 親要素を参照 これホントになんとかしてほしいな jQueryで散々自由に要素選択できてて、CSSにてこ入れ必要になったとき 親要素にidつけんと、最悪divで囲まないと、ってとき萎える せめてparentとparents相当なものだけでも スレチですまん : Name_Not_Found [sage] 2017/09/21(木) 04:34:59.19ID:??? addClassの難点は色変更で#808080の類 実際よくある : Name_Not_Found [sage] 2017/09/21(木) 04:39:16.19ID:??? それとfont-sizeやwidthなど段階的に数パターンの値を当てたいとき これもまたよくある : 751 [sage] 2017/09/21(木) 05:15:56.15ID:??? ページの特徴上、ざっくり書くと遷移時はリセットするとみてください。考慮しなくていいです。 する操作があった場合はメッセージを促しています。ユーザビリティ云々は承知の上です。 ページ全体が作業場になっているイメージなのです。 正確には「form部品を使った〜の操作」でした。 resetに相当するボタンはありますがsubmitはありません。 formもありますが上記の方が多いです。これは誤解の元でした。すみません。 : Name_Not_Found [sage] 2017/09/21(木) 05:42:04.65ID:??? その通りなのですがphpやセキュリティがらみだと面倒でして。 特に後者は誰もが精通してるわけでもないので。 悪意あるページから入ってこられたり。 お問い合わせフォーム程度なら両者楽勝なのですが。 書くまでもないでしょうがユーザビリティとセキュリティの両立に絶対的な正解がない現状なかなか・・・。 おそらくphp有無で質問に影響はないと思ってます。今のところ。 : Name_Not_Found [sage] 2017/09/21(木) 09:39:57.99ID:??? > ページの特徴上、ざっくり書くと遷移時はリセットするとみてください。考慮しなくていいです。 矛盾してる。 考慮しなくていいならば、遷移時(リロードや戻る)を実行したら フォームの内容はリセットされなくなる。 検証としてHTMLにtextareaを一個置くだけのフォーム作ってやってみ フォームの内容がリセットされないのはわかるはず だから「リセットしたいと考慮する」ならばコードを書かないといけない。 だから何も考慮しなくていい(ブラウザのデフォルトの挙動)でいいじゃんって言ってるんだが。 > resetに相当するボタンはありますがsubmitはありません。 まさかJavaScriptでボタンをクリックしたら、フォームの内容を一個一個初期値に 相当する値に書き換えてるんじゃないだろうね? input type="reset" ボタンが用意されてるんだからそれを使えばいい。 JavaScriptのコードは一切書かずに初期値に戻る : Name_Not_Found [sage] 2017/09/21(木) 22:57:49.28ID:??? のコード訂正 > それを改善したのがこっち > ttps://jsbin.com/japiripaxo/1/edit?html,css,js,output 不要なコード( $('input').trigger('change') )が残ってた。 訂正版 ttps://jsbin.com/xibozenopo/edit?html,css,js : Name_Not_Found [sage] 2017/09/21(木) 23:03:08.62ID:??? 言葉の揚げ足取りはやめよう : Name_Not_Found [sage] 2017/09/21(木) 23:17:30.05ID:??? これは重要な所なので揚げ足取りではない。 : Name_Not_Found [sage] 2017/09/21(木) 23:41:39.28ID:??? input type="hidden" を使用しないでクラスを使う方法 ttps://jsbin.com/sapehacuro/1/edit?html,css,js ttps://output.jsbin.com/sapehacuro/1 Chromeで実行してみればわかるが 他のページに移動してから戻ると、フォームの値は残っているのに フォームの値で表示される部分は表示されない。 Firefoxだとおそらく大丈夫(Back Forward Cacheとやらの機能) inputの値はキャッシュされて残るがクラスはキャッシュされないため。 これを回避するには、ページが表示された時に フォームの内容をクラスに反映させるという処理が必要になる。 : Name_Not_Found [sage] 2017/09/21(木) 23:49:11.67ID:??? クラスを使う場合、form.resetを使えばフォームの値はリセットされる。 だけどFirefoxの場合はJavaScriptのレンダリング結果がキャッシュされるので フォームはリセットされるが、画面は表示されたままになるはず。 だからFirefoxのためにunloadイベントで適当な処理をして Back Forward Cacheを無効にする必要があるだろうな。 せっかくブラウザが実装したユーザビリティを高める処理が台無しw ながながとサンプルコードとともに書いたが、 JavaScriptに依存した処理の方があれこれ考えることが 多くなって苦労するんだよ。 不整合は見なかったことにするって考えもあると思うがw 一番楽で安定している手法は、基本はHTMLとCSSを用いて制御する方法。 どうしてもできない場合は、JavaScriptで足りない部分だけを補完し、 HTMLとCSSを用いた制御ができるようにすること : Name_Not_Found [sage] 2017/09/22(金) 00:00:15.26ID:??? 入力値が意図した通りに入ってくるとは限らないからそれは1つの手ではある 最悪悪意あるscriptの可能性もある(テキストボックスでなくラジオボタンでさえも) 無論それはサーバサイドで処理するわけだがバリデなど値処理はJavaScript(jQuery)で行うからな なかなかやるな、よりはるか上いってるわ : Name_Not_Found [sage] 2017/09/22(金) 00:16:39.14ID:??? ブラウザ判別分岐は将来性含めてなるべく使いたくないな > HTMLとCSSを用いて制御する方法 でやはどうしてる? : Name_Not_Found [sage] 2017/09/22(金) 00:18:55.62ID:??? 無理して俺に矛先向けなくていいよw 俺に関係ない話だろうが(それすらもわからないレベルなんでしょ?) 本気の入力チェックはサーバー側でやるのは当たり前の話。 : Name_Not_Found [sage] 2017/09/22(金) 00:27:06.83ID:??? 進むとか戻るとかリロードした時の状態は 実際には些細な問題として無視されてるんじゃないかと思う。 通常は見た目だけの問題だから大きな問題に発展することはないだろう。 以前の職場のシステムは、時々ブラウザでこんな操作をすると おかしくなりますってバグレポートが上がって その都度行き当たりばったりで直していた。 継ぎ接ぎだらけのやつだったんで、そうするしかなかった。 でもHTMLとCSSを使って制御すれば処理はシンプルになる (ただし必ずしもコードが少なくなるわけではない 特にCSSはsass使うのを推奨する) : Name_Not_Found [sage] 2017/09/22(金) 00:48:01.73ID:??? どうした急に、様子が今までと違って変だぞ : Name_Not_Found [sage] 2017/09/22(金) 00:50:23.92ID:??? でも、まあブラウザ周りで行き当たりばったりはしゃーない の件は他の人にもききたいわ : Name_Not_Found [sage] 2017/09/22(金) 18:41:50.72ID:??? ページ遷移・ヒストリーなどを考慮するなら、 jQuery Mobile でも使えば? : Name_Not_Found [sage] 2017/09/22(金) 21:53:54.93ID:??? このスレには大規模や複雑な案件やったことないのばかりだから答えは期待できないだろう : Name_Not_Found [sage] 2017/09/23(土) 03:06:55.76ID:??? jQuery Mobileはウェブでスマホネイティブ風な 画面を作るためのUIフレームワーク ページ遷移やヒストリーだけを扱うものじゃない。 ついでにいうとjQueryの名前がついてるが jQueryを使っていると言うだけで jQueryの拡張でもDOM操作ライブラリでもない : Name_Not_Found [sage] 2017/09/23(土) 08:26:08.12ID:??? 上から目線で断じるっていうことはあなたはやったことがあるのだろうけど、炎上ネタだけ提供して何の情報も提供しないあなたは陰湿だと思った : Name_Not_Found [sage] 2017/09/23(土) 14:06:20.12ID:??? 実際あなた含めて答える人いないじゃん 今まですぐレスあったのに 質問の(1)〜(3)を1人除いて誰か具体的に「俺は何番」と答えた人いた? 例えばプロフィール入力してもらうくらいならいいが、プログラム的要素が強くなってくるとブラウザ任せともいかない場合もある HTML/CSSスレでなくここで質問してるということ : Name_Not_Found [sage] 2017/09/23(土) 14:51:24.41ID:??? プロフィール入力してもらうくらい ではないものってなんだ? : Name_Not_Found [sage] 2017/09/23(土) 15:38:46.51ID:??? オイオイ大丈夫かここ 嫌なヤツというならだな 記事ではなくとあるのだからそれなりの動的ページに関係してることはわかるはず 質問に答えた上で加えていうならまだしも ・基本的なことをわかってないと決め付けている ・質問に関係ないことを上から目線 : Name_Not_Found [sage] 2017/09/23(土) 15:40:41.30ID:??? で秒殺されてたなw : Name_Not_Found [sage] 2017/09/23(土) 19:05:13.08ID:??? > 質問に答えた上で加えていうならまだしも 質問に答えてるぞ? の書き込みから、jsbinにサンプルコードもまで書いたろ? お前は何をやった? : Name_Not_Found [sage] 2017/09/23(土) 19:13:28.16ID:??? * HTML側ではcontrolled componentは一律hidden * JavaScript側で表示/非表示の初期値を持つ * DOM構築時にJavaScript側の初期値に従ってhidden除去 が好み(Reactに近い振る舞いというのもある) : Name_Not_Found [sage] 2017/09/23(土) 22:31:51.20ID:??? ウェブの世界はHTMLベースとJavaScriptベースの 二極化になってるよね。 : Name_Not_Found [sage] 2017/09/23(土) 22:36:07.31ID:??? >この値で表示非表示を決めるのだから その決め付けはおかしい そこがcheckedだろうが他の要因で表示非表示になるケースも考えられる 単純な表示非表示のチェックボックスとは限らないだろう もしそうなら他の要因でそのチェックも連動すればいいだけだが : Name_Not_Found [sage] 2017/09/23(土) 22:42:38.72ID:??? 他の要因があるなら、他の要因(複数のinput要素)を 組み合わせればいいだけじゃん 実際に書いてあげなきゃわからない? ↓これ両方がチェックされた時に表示される <input id="a" type="checkbox"> <input id="b" type="checkbox"> <div>ok</div> div { display: none} #a:checked + #b:checked + div { display: block} : Name_Not_Found [sage] 2017/09/23(土) 22:52:23.63ID:??? 8つの要因で決まるとしたら8つ条件並べるわけだ・・・ありえね〜 : Name_Not_Found [sage] 2017/09/23(土) 22:54:06.72ID:??? 並べなくていいだろw そのためのsassなんだから : Name_Not_Found [sage] 2017/09/23(土) 22:55:11.45ID:??? それとさ、チェックだけで決まると思ってるの?計算結果で決まる場合は? : Name_Not_Found [sage] 2017/09/23(土) 22:55:44.69ID:??? 横から失礼、CSSでお願いいたします : Name_Not_Found [sage] 2017/09/23(土) 22:57:22.51ID:??? 取得座標で決まる場合は? : Name_Not_Found [sage] 2017/09/23(土) 22:57:37.54ID:??? ん? もしかして何もしれないのかもしれないけど、 CSSは、#a:checked だけじゃなくて #a[attr="value"]のような任意の値を使うこともできるんだよ。 : Name_Not_Found [sage] 2017/09/23(土) 22:57:55.04ID:??? sassからcssに変換できる。 : Name_Not_Found [sage] 2017/09/23(土) 23:00:49.15ID:??? その場合は、取得座標から現在地の種類を 判断するところまでがJavaScript 現在地の種類をクラスやフォームに入れておけば CSSで処理できる。 もっとも取得座標っていうのはマウスの座標だろうし キャッシュされることはない値だから関係ない話になるけどね : Name_Not_Found [sage] 2017/09/23(土) 23:04:00.91ID:??? それよく使ってる JSでその値変えればSSに従って変わるのだが、イコール、含む、始まるなどはできるが範囲指定などはできない 初期設定ならそこまで不要な場合がほとんどだが実行中はそうはいかない場合もよくある : Name_Not_Found [sage] 2017/09/23(土) 23:05:04.02ID:??? >取得座標っていうのはマウスの座標だろうし このスレなんでこう決め付けるのいるんだろうな : Name_Not_Found [sage] 2017/09/23(土) 23:07:22.18ID:??? 初めからCSSでお願いいたします : Name_Not_Found [sage] 2017/09/23(土) 23:16:00.37ID:??? 説明が足りないからでは? : Name_Not_Found [sage] 2017/09/23(土) 23:20:59.67ID:??? いや、だから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 とか 入れれば良いんだよ。 : Name_Not_Found [sage] 2017/09/23(土) 23:22:17.26ID:??? で言っていたな > 一番楽で安定している手法は、基本はHTMLとCSSを用いて制御する方法。 > どうしてもできない場合は、JavaScriptで足りない部分だけを補完し、 > HTMLとCSSを用いた制御ができるようにすること : Name_Not_Found [sage] 2017/09/23(土) 23:25:43.34ID:??? それはわかってる 上でHTMLとCSSのみに固執してたのがいたから同一人物かと勘違いしてたわ、スマン : Name_Not_Found [sage] 2017/09/23(土) 23:28:12.13ID:??? 質問にしろ全部書けないだろ 長いとそれはそれで読まれないし突っ込まれるし 座標っても領域やサイズなど色々あるのに何その根拠?ってのは俺も思った : Name_Not_Found [sage] 2017/09/23(土) 23:30:55.87ID:??? ん? それどうせ俺だろ? 俺は最初から固執してないが、たまたまそのレスでは javaScriptに言及してなかったんだろ フォームの話では初期値はHTMLに書いておくのが正しいし 表示非表示はHTMLとCSSで行うのが良い。 どーしてもできないって所は、その場所限定の適当なコードを 書くんじゃなくて、どうやればHTMLとCSSで表示非表示を 制御できるか?を考えて汎用的なパーツにするのが良い。 そうすることでDOM APIでは面倒な、一括して複数の要素に対して 処理を適用できるというjQueryのパワフルな能力を活かすことができる。 : Name_Not_Found [sage] 2017/09/23(土) 23:32:21.49ID:??? > 座標っても領域やサイズなど色々あるのに何その根拠?ってのは俺も思った 座標って言ってない。「取得座標」だ。 領域やサイズの「取得座標」ってなんのことだ? サイズの「取得座標」ってなんのことだ? : Name_Not_Found [sage] 2017/09/23(土) 23:35:01.83ID:??? いちいち細かい、それを揚げ足とりと言うんだよ それくらい脳内変換しろよ : Name_Not_Found [sage] 2017/09/23(土) 23:36:37.06ID:??? : Name_Not_Found [sage] 2017/09/23(土) 23:37:25.33ID:??? 明らかに説明が足りないことを言う 誤解するのを狙って、実際に誤解したらそこを執拗に攻撃する。 罠だったんだな。 : Name_Not_Found [sage] 2017/09/23(土) 23:37:50.44ID:??? もも俺ですがなにか?w : Name_Not_Found [sage] 2017/09/23(土) 23:38:49.14ID:??? あ、分かってないと思うけど、フォームっていうのはHTMLの フォームのことでこれはHTMLであってJavaScriptではないからなw : Name_Not_Found [sage] 2017/09/23(土) 23:41:39.20ID:??? 草生やしたら終わりだな : Name_Not_Found [sage] 2017/09/23(土) 23:42:37.78ID:??? なんでだよw : Name_Not_Found [sage] 2017/09/23(土) 23:52:22.66ID:??? だな もうこれ以上は不毛なやりとりが続くだけだろう : Name_Not_Found [sage] 2017/09/23(土) 23:56:18.16ID:??? つまり俺だけがまともなことを言って、 そのまともなことを言われるのが気にいらないやつは 煽っておしまいということかね?w お前はまともなやり取りをしたかって話だよ。 : Name_Not_Found [sage] 2017/09/24(日) 04:15:06.40ID:??? 俺は答えを知らない 知っているのに答えないのと、知らないので答えられないのはまるで違う あなたはどちらなのかね? あなたが答えを知っているのなら、他人を冷やかすだけでスレに貢献しない人だ あなたが答えを知らないのなら、知ったかで確証のないこと()を書くいい加減な人だ どちらにしても、信用できる人だとは思えない : 840 [sage] 2017/09/24(日) 05:40:58.06ID:??? 俺はじゃないが 質問者に答えてるのは俺だけだったと思うよ : Name_Not_Found [sage] 2017/09/24(日) 11:20:20.63ID:??? あなたはお呼びじゃない : Name_Not_Found [sage] 2017/09/24(日) 11:32:56.48ID:??? 8つの条件の組み合わせを考えると、2^8 = 256 通りの組み合わせ爆発で、 CSS, JavaScript のどちらでも、プログラミングの設計段階で破綻している こういう仕様を作ったら、ダメ : Name_Not_Found [sage] 2017/09/24(日) 14:09:46.59ID:??? 表示、色、サイズ等を変更するなどよくあるケース jQueryならチェーンメソッド1行で済む 問題は設計仕様ではなくSSだけで済まそうとするそのやり方 : Name_Not_Found [sage] 2017/09/24(日) 14:40:42.02ID:??? 全部SS(スタイルシート?誰も使ってない略語を使うな。恥ずかしい) でやろうなんて言ってない。 JavaScriptでやるのは状態の管理までで 見た目はスタイルシートでやるという話だ : Name_Not_Found [sage] 2017/09/24(日) 14:52:24.10ID:??? sassってのもあるぞ : Name_Not_Found [sage] 2017/09/24(日) 14:54:56.92ID:??? >JavaScriptでやるのは状態の管理までで >見た目はスタイルシートでやるという話だ それは皆わかってるからもういいよ くどいったらありゃしない それを踏まえた上で話してんだろ : Name_Not_Found [sage] 2017/09/24(日) 15:51:00.96ID:??? 元はその線引きをどうするということなんだよな 例えば実際、1つの要素にこれらを指定するときみんなはどうしてるのだろう? 表示 <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も変えなくてはならないので保守性悪い : Name_Not_Found [sage] 2017/09/24(日) 22:21:21.83ID:??? そんなものはユーザCSSの範疇なので、作ろうとも思わない : Name_Not_Found [sage] 2017/09/24(日) 22:58:14.49ID:??? 逃げるが勝ち、とな : Name_Not_Found [sage] 2017/09/25(月) 01:04:14.69ID:??? 不必要なものを作るのは馬鹿のすることだ : Name_Not_Found [sage] 2017/09/25(月) 08:06:04.51ID:??? ? 唯一答えてるのは776だけだが : Name_Not_Found [sage] 2017/09/25(月) 10:36:19.97ID:??? 頼むからそいつを刺激しないでくれ 餌を与えれば、誰にでも食いついてくる輩だぞ : Name_Not_Found [sage] 2017/09/25(月) 19:17:05.49ID:??? 不必要とはどういうこと?案件によるし君がこの件の何を知ってると? そんなに特異な条件ではないぞ : Name_Not_Found [sage] 2017/09/25(月) 20:47:53.63ID:??? たぶんお問い合わせフォームかその延長くらいしか手がけたことなくて想定できないのでは : Name_Not_Found [sage] 2017/09/25(月) 22:39:36.55ID:??? フォームを使わない派の人? であればリロードしたときや進む・戻るを 押した時にフォームの値と画面がずれる件を どう対処してるか聞きたいんだけど : Name_Not_Found [sage] 2017/09/25(月) 23:22:33.39ID:??? 俺が言いたいのはそこなんだよね。 みなさん、そこまで考えたことありますか?ってこと 確かに少しぐらいフォームと見た目がずれていても ブラウザのせいですとか言って逃げるのもありだし、 キャッシュを強制的に破棄してリセットするのもありだろう。 仕事は時間が有限に有るわけじゃないから手抜きするのも ありなんだけど、それはそれとしてブラウザの挙動をちゃんと 理解して最善の方法も提案できないとダメだと思う。 それができないと小規模なコードしか書いたことがないように見えてしまうよ : Name_Not_Found [sage] 2017/09/26(火) 21:12:06.93ID:??? フォームを使わない「派」? <form>は使ってるよ ずれは案件による。大雑把に言うと ・単純なものはブラウザまかせ ・図形など複雑なのは初期化(クッキーが関係してくる場合もあるので) いずれにしろ必要なときに正確に取得することには注意してる 当たり前だが : Name_Not_Found [sage] 2017/09/27(水) 00:20:56.88ID:??? 図形とフォームが結びつかないんだけどどういうこと? ドローツールみたいな物の話をしてる? : Name_Not_Found [sage] 2017/09/27(水) 19:02:20.04ID:??? 加えて書くと、<form>を使うか、使わず部品だけ使って即座に反映させるかは時と場合による ユーザ目線での使いやすさ、他の部分及び全体との統一性、仕様、引継ぎなら元の状態などなど 書いててばかばかしくなる : 860 [sage] 2017/09/27(水) 22:25:29.72ID:??? ユーザー目線での使いやすさやそこに書いてある理由は フォームを使わない理由にはならないよ。 例えば、日付入力のinput要素があったとして 最近のブラウザはHTML5のリッチなインターフェースを 出すようになったけど古いブラウザでテキスト入力になるから ユーザー目線で使いやすように独自で作ろうとなったとする。 だけどこれはフォームを使わない理由にはならないのはわかるよね? Bootstrap Datepickerとかを使ったことが有る人ならわかると思うけど textタイプのinput要素がリッチな日付選択フォームに化けるんだよ この発想の応用で「ユーザーが何かしらの値を入力するもの」は 全てフォームのinput要素で実現できる。 (もちろんinput要素を使いやすいインターフェースに化けさせるわけだけど) たしかに使いやすさのためにフォームが適切じゃないのはあるだろうけど ドローツールみたいな具体的な利用例を書いてくれてないので、説得力がないんだよ。 : Name_Not_Found [sage] 2017/09/27(水) 22:32:12.31ID:??? 長!んなもん案件によるわ : Name_Not_Found [sage] 2017/09/27(水) 22:33:03.33ID:??? だからどんな案件? : Name_Not_Found [sage] 2017/09/27(水) 22:34:23.97ID:??? たしかに案件による。殆どの案件はフォームで良い フォームが適切じゃない案件はほとんどない。 探せば有るだろうけどぱっと思いつかないぐらい。 という意味で案件による。 : Name_Not_Found [sage] 2017/09/27(水) 22:38:05.36ID:??? 「案件による」っていうのは反論ではない。 何が食べたい?なんでもいい。これと同じぐらい意味がない答 だからそんなにムキにならなくていい。 : Name_Not_Found [sage] 2017/09/27(水) 22:41:37.45ID:??? いやそれはそうなんだけど、せっかくレスするなら 自分の意見を言ってくれと : Name_Not_Found [sage] 2017/09/27(水) 22:42:09.75ID:??? >説得力がないんだよ。 別にいいよ、そんなつもりないから にレスしただけだ クライアントでもないお前さんにあれこれ言われる筋合いはないし、 うちのやり方なんてどうでもいいだろ? : Name_Not_Found [sage] 2017/09/27(水) 22:50:20.93ID:??? 割り込み失礼。 の1つの要素(オブジェクト)に、の不必要なものって何でしょう? タグ何か余分? : Name_Not_Found [sage] 2017/09/27(水) 22:57:48.69ID:??? > うちのやり方なんてどうでもいいだろ? あなたのやり方はどうですか? という質問に対して、 うちのやり方なんてどうでもいいだろ は、なんのために答えたんですか?レベルなんだけどw 正解が有る問題だと思ってるのかな? 正解がない問題は、あなた(だれか)のやり方を 聞くしか無いでしょうに。 : Name_Not_Found [sage] 2017/09/27(水) 23:10:17.36ID:??? レスしただけと・・・ 粘着? : Name_Not_Found [sage] 2017/09/27(水) 23:22:10.26ID:??? 客にどちらが良いと思う?という質問された時に 場合によるなんて言っていたら仕事無くすよ? 場合によるならば、○○の場合はこうで ××の場合はこうです。という答え方をしなきゃ 質問している方だって「場合による」っていうのは 分かって専門化の判断基準っていうのを聞いてるんだよ。 : Name_Not_Found [sage] 2017/09/27(水) 23:22:44.74ID:??? ↑うざーーーーーーー 絡まないほうがいいよ : Name_Not_Found [sage] 2017/09/27(水) 23:23:03.23ID:??? つか、なんで新人に対しての顧客対応の やり方みたいなのを説明しなきゃならんのだよw : Name_Not_Found [sage] 2017/09/27(水) 23:24:12.02ID:??? ↑もっとうざーーーーーーー 自分が客だとでも : Name_Not_Found [sage] 2017/09/27(水) 23:25:21.93ID:??? いや「場合による」で答えたつもりになってるのは 恥ずかしいなぁって話だよ。 : Name_Not_Found [sage] 2017/09/27(水) 23:33:55.14ID:??? 871が読めないらしい もうスレ違いになってきてるしな : Name_Not_Found [sage] 2017/09/27(水) 23:36:06.43ID:??? そういう話なら、にレスしている を読むべきでは? : Name_Not_Found [] 2017/09/29(金) 00:17:23.61:uQr6aUON jqueryスレッドがあったのでこちらに書かせてください。 fancybox3のサイトの記述通りにパーツを落とさないでリンクを貼るだけのやりかたで fancyboxを動かしています。 この場合はオプションが追加可能な下記スクリプトで <script type="text/javascript"> $("[data-fancybox]").fancybox({ オプション }); 全画面中の透明なし、背景色の指定、枠線追加等はできないでしょうか? やはりcssとjsファイルを落として自分で書き換えないと無理でしょうか? どなた教えてください。 : Name_Not_Found [sage] 2017/10/01(日) 16:59:39.86ID:??? 分析解析などの分野でOK/キャンセルボタンがない場合がある。 resetもあるわけがない。(事前確認によるその類はあるが。) よってformが不要なことはある。 : Name_Not_Found [sage] 2017/10/01(日) 18:54:01.15ID:??? OK/キャンセル/resetボタンがないから formがいらないっていうのは短絡的だな input要素を一塊にして扱うならば、 formにしておくことで、JavaScriptから 一括でデータを読み込んだりキャンセルできる : Name_Not_Found [sage] 2017/10/01(日) 18:57:09.86ID:??? 短絡的な発想ついでに言っておくと、 submitボタンがないからといって、 Ajaxを使わなければいけないってことにはならない。 formにしておけばsubmitメソッドが使えるからだ : Name_Not_Found [sage] 2017/10/01(日) 19:49:58.81ID:??? だろ、その分野を知らない そこはclickだろ : Name_Not_Found [sage] 2017/10/01(日) 21:23:02.68ID:??? submitがいらないっつーのに「submitが使えるからだ」て : Name_Not_Found [sage] 2017/10/01(日) 23:59:52.99ID:??? よく読め OK/キャンセル「ボタンがない」場合だ ボタンがないだけでsubmitしないとは書いていない : Name_Not_Found [sage] 2017/10/02(月) 19:05:17.78ID:??? 「書いていないからする」 何この思い込み : Name_Not_Found [sage] 2017/10/02(月) 19:21:43.90ID:??? それをいうならば 「書いていないからしない」 も思い込みなわけで : Name_Not_Found [sage] 2017/10/02(月) 19:28:58.23ID:??? しない。書いた本人です。 : Name_Not_Found [sage] 2017/10/02(月) 19:39:01.97ID:??? 情報小出しかよ : Name_Not_Found [sage] 2017/10/02(月) 21:16:58.14ID:??? だいたいわかるだろ : Name_Not_Found [sage] 2017/10/02(月) 21:25:46.70ID:??? それが思い込みにつながる : Name_Not_Found [sage] 2017/10/02(月) 22:10:57.05ID:??? なかなかユニークな自己紹介だな : Name_Not_Found [sage] 2017/10/03(火) 18:06:02.53ID:??? JavaScript飛ばしてjquery勉強するやつなんなの? 業界未経験者採用してる会社って、新人にどういう順番で教えてる? : Name_Not_Found [sage] 2017/10/03(火) 18:23:44.11ID:??? とりあえずの戦力と言うことで… 使い捨てじゃないの? 大事に育てたいならJavaScriptは必要だね。 あと、とっかかりとしてjQなのかもよ。 いずれは内部の事も知らないといけないけど、 まずは何でもいいからねーって。 : Name_Not_Found [sage] 2017/10/03(火) 19:57:05.17ID:??? 例えば人員の表で、男のみや女のみの絞込み、ID順に並び替えなど、 よほど処理時間かからない限りOKボタンなど配置しない よくあるケースで今までもたぶん目にしてると思うよ 気にして見てる人は少ないだろうけど あと君に言うわけではないが「フォームが適切じゃない」とさんが書いてるが誰もそんなこと書いてないかと なくてもよくね?の類は見られるが : Name_Not_Found [sage] 2017/10/03(火) 22:26:59.56ID:??? それはぱっと思いついた話だけど、、一歩ずつ考えていこうか? まず、表全体のデータがクライアントにあるとしよう (サーバー側にあっても同じことなんだがとりあえず) 絞込などの条件は、場合によっては1つしか無いって場合も有るだろうけど、 どちらかと言えば1つしか無いのは例外で、絞込項目は複数あって 並び替え機能もあるとしよう。 そうすると変更した項目だけからでは、表データを作ることはできない。 なぜなら、性別での絞込 + 年齢での絞込 + ID順 といった情報が すべて揃ってないと表示する一覧は組み立てられない そうすると必然的に複数の条件は「人員の表を出すために必要な条件」と してグループ化考えることができるわけよ。 ボタンがなくて即時反映したとしても概念的なグループが存在する。 そのグループをフォームとして考えればいいわけ。 ---- ここまではフォームとして作るのが自然でしょ?っていう話。以下はJavaScript側のメリット ---- グループをフォームとして作っておけばこれはJavaScript的にも便利なことがあって、 フォームデータをシリアライズするライブラリを使ったり作ったりすると、 条件オブジェクトとして{gender: 'man', age: 20, order_by: 'id'} みたいな ハッシュを生成するのが簡単になる。 こういうライブラリは汎用的なライブラリとして作れるのでテストもしやすい。 そして全体のデータを、これらの条件オブジェクトを使って、フィルタするようなものを作る。 DOM操作が不要でこれも汎用的なライブラリにできるだろうからテストしやすくなる 最後に表示すべき表データからDOMを生成して完成。 : Name_Not_Found [sage] 2017/10/03(火) 23:27:12.78ID:??? divでよくね? div厨ではないが、 : Name_Not_Found [sage] 2017/10/03(火) 23:40:31.95ID:??? 色変えるなどでなければdivさえいらんわ : Name_Not_Found [sage] 2017/10/04(水) 00:09:07.97ID:??? 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配下においておけばメンテナンス性もよくなる : Name_Not_Found [sage] 2017/10/04(水) 11:19:37.91ID:??? 名前空間は変数のバッティングを防ぐためで当てはまらない メンテナンス性向上はあるがHTMLに関しては必要なければ余計な囲いはないほうがいい <p>や<ul>にクラス付ければ済むのにわざわざ<div>つけることはない 便利なのはわかるが今回それでなくてはならない理由がないんだな 使うか否かは記事の内容や本人次第だろう 押し付けがましいにもほどがある : Name_Not_Found [sage] 2017/10/04(水) 20:09:17.54ID:??? 上とは全く別件です フォーム(#fm)の中にリセットボタン(#rst)を設置 Windowを閉じる前に確認 $('#rst').click(function(){$('#fm').reset();}); $(window).on('beforeunload',function(){return '終わるよ';}); #rstでも終わるよダイアログがでてしまうのですがどこがいけないのでしょうか? : Name_Not_Found [sage] 2017/10/04(水) 21:00:09.09ID:??? 押し付けてないよ? 事実としてグループととして扱えるように form要素で囲んでおくとのが良いってだけ form要素で囲んでおくとメリットは有るが デメリットはない : Name_Not_Found [sage] 2017/10/04(水) 22:48:52.17ID:??? >$(window).on('beforeunload',function(){return '終わるよ';}); $(window) ここには普通、セレクターが入る $('#fm') とか : Name_Not_Found [sage] 2017/10/04(水) 22:55:32.35ID:??? 「js event bubbling」で検索! DOM イベントのバブリング。 子要素から、親要素の方向へ、イベントが伝播されていく event.stopPropagation イベント伝播を止める : Name_Not_Found [sage] 2017/10/05(木) 00:11:02.96ID:??? > 必要なければ余計な囲いはないほうがいい それ大事 引継ぎで何か意味あるのかと無駄な手間が減る : Name_Not_Found [sage] 2017/10/05(木) 00:13:17.60ID:??? ttps://qiita.com/maruyam-a/items/a72774543e4866dee3c8 : Name_Not_Found [sage] 2017/10/05(木) 18:08:37.54ID:??? jqplotで凡例の項目の一部をデフォルトfalseにしたいのですが どのようにすればできるでしょうか? 例えば以下のサンプルサイト様の凡例「花子」を 初期起動時にはデフォルトでfalseにするイメージです ttp://alphasis.info/2012/04/jquery-plugin-jqplot-line_charts-legend-numberrows/ よろしくお願いします : Name_Not_Found [sage] 2017/10/05(木) 20:54:08.45ID:??? Windowを閉じる前に確認、とは親Window=ブラウザです 具体的にお願いできないでしょうか $('#rst').click(function(e){e.stopPropagation()}); でも同じでした : Name_Not_Found [sage] 2017/10/05(木) 21:47:55.36ID:??? それは別に大した問題じゃないかな。 一連のフォーム要素があることに対するパラメータ群であれば formで囲えるだけじゃなくて名前もつけられる。 例えばsearch_paramsとかcustomer_infoとかね そうするとこれは検索条件の名前なんだ、顧客の名前なんだと 意図が明確になる : Name_Not_Found [sage] 2017/10/05(木) 23:08:47.84ID:??? もっと簡単な例で、質問してくれ 何を言っているのか、さっぱり分からない : Name_Not_Found [sage] 2017/10/06(金) 14:56:09.32ID:??? こうかな? $('#rst').click(function(e){e.preventDefault(); e.stopPropagation(); $('#fm')[0].reset();}); : Name_Not_Found [sage] 2017/10/06(金) 21:03:18.17ID:??? 完璧です!邪魔だったクエリまで消えてくれて ありがとうございます : Name_Not_Found [sage] 2017/10/07(土) 12:06:52.17ID:??? 珍しくスレ伸びてると見たらdiv厨ならぬform厨が張り付いてたのか こんだけ拘っておいて押し付けてないってどんな神経なんだ : Name_Not_Found [sage] 2017/10/07(土) 13:28:05.28ID:??? 押し付けてないよ? どうするのが良いかの話をしているだけであって 悪い方を選ぶのは自由だから : Name_Not_Found [sage] 2017/10/07(土) 21:06:12.34ID:??? そう思うならそうなんだろ : Name_Not_Found [sage] 2017/10/08(日) 00:10:55.22ID:??? 満足した? : Name_Not_Found [sage] 2017/10/08(日) 01:58:54.73ID:??? 満足とかそういう問題じゃなくて 単にあるべき姿を言ってるだけ : 751 [sage] 2017/10/08(日) 12:41:56.15ID:??? 今回はreset()は使わないですしformは不要なので使わずにやります。 みなさんどうもでした。 : Name_Not_Found [sage] 2017/10/08(日) 13:23:19.12ID:??? 白々しいw わざわざのふりして、悪いやり方をしますって 宣言するとか、やるだけ無駄だってわからんの?w : Name_Not_Found [sage] 2017/10/08(日) 13:33:14.96ID:??? あるべきという言葉はそれ以外を否定しているわけで結局のところ押し付けの婉曲表現です なぜならそのあるべきから外れることは「間違いである」と言っているのと等価ですので better to beではなくshould beまたはmust be(場合によってはshall be)ならね : Name_Not_Found [sage] 2017/10/08(日) 13:41:08.65ID:??? ttp://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」の基本的な使い分け方 ttps://eikaiwa.weblio.jp/column/phrases/natural_english/difference_must_should_have_to 「should」は助言や提案を表す 「should」は「〜したほうがよい」というニュアンスの助動詞です。助言や提案をするときに使われるため、 「must」や「have to」に比べて強いニュアンスはありません。 : Name_Not_Found [sage] 2017/10/08(日) 13:42:48.55ID:??? ttps://eow.alc.co.jp/search?q=ideal+form ideal form 理想形 ttps://eow.alc.co.jp/search?q=ideal+state ideal state 理想的な状態[状況] : Name_Not_Found [sage] 2017/10/08(日) 13:44:35.30ID:??? コピペ乙 : Name_Not_Found [sage] 2017/10/08(日) 13:48:49.93ID:??? should=〜した方がいい は日本の英語教育の害悪の一つ : Name_Not_Found [sage] 2017/10/08(日) 13:51:25.13ID:??? しなければならない ・・・ must するべきである・・・ should ある(する)べきなんだから、それ以外を否定しているわけじゃない : Name_Not_Found [sage] 2017/10/08(日) 13:56:18.88ID:??? 日本語の勉強した方がいいんじゃないか? 「〜するべき」と言われていることに反した行動をとった人がいたら普通眉をひそめるだろ? それってどういうことか考えてみなよ : 751 [sage] 2017/10/08(日) 14:56:51.74ID:??? いえ、本人です。 もちろん普通のお問い合わせフォームでは使ってますよ。 : Name_Not_Found [sage] 2017/10/08(日) 15:08:18.75ID:??? はいはい。は俺ですよ : Name_Not_Found [sage] 2017/10/08(日) 15:21:23.76ID:??? 自分だけは常に誰よりも正しいという前提 : Name_Not_Found [sage] 2017/10/08(日) 20:26:03.00ID:??? 成りすましバレバレ、楽しい? : Name_Not_Found [sage] 2017/10/08(日) 21:19:16.31ID:??? なりすましじゃねーよ 証拠あんだろ : Name_Not_Found [sage] 2017/10/09(月) 00:14:32.77ID:??? 証拠? つーかくだらん書き込みでクソスレ化が進んでるな : Name_Not_Found [sage] 2017/10/09(月) 01:50:37.95ID:??? 日本語というより RFC2119 的な主張がされている気がしないでもない 歪曲表現を好む日本人には受け入れがたいだろうが… : Name_Not_Found [sage] 2017/10/09(月) 08:52:28.02ID:??? 証拠www : Name_Not_Found [sage] 2017/10/10(火) 21:57:43.27ID:??? ご存知けっこう有名なサイト ttps://qiita.com/manabuyasuda/items/dbb76ed36970bec95470 ttp://php-archive.net/html/css-class-naming-rules/ : Name_Not_Found [sage] 2017/10/12(木) 19:26:21.19ID:??? 基本的なことで質問です。 jsfiddleなどのサイトでなくテキストにして幾つかのブラウザ(ie9など)で。 画面の戻る進むや再読込すると、チェック状態と結果が違う場合があります。 チェック状態なのに四角だったり。 セレクトボックスやラジオでも同様なことが起こります。 どう対処してますか? : Name_Not_Found [sage] 2017/10/12(木) 19:30:52.64ID:??? 例えば #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'); } }); }); : Name_Not_Found [] 2017/10/13(金) 19:54:28.41:Yg2IOlec 訂正です。 誤:幾つかのブラウザ(ie9など)で。 正:幾つかのブラウザ(ie9など)で試してもらえれば現象確認できると思います。 : Name_Not_Found [sage] 2017/10/13(金) 22:31:28.85ID:??? ちょっと見づらいからリファクタリングな #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')); }); }); : Name_Not_Found [sage] 2017/10/13(金) 22:34:39.89ID:??? んで、この話はWeb製作板でこの間やったな。 input要素に状態を記録しろと。同じ話でいいならやるけど? : Name_Not_Found [sage] 2017/10/13(金) 22:44:33.88ID:??? 何言ってるのこいつ : Name_Not_Found [sage] 2017/10/13(金) 22:50:02.22ID:??? Web製作板で論破されて悔しいからこっちで仕切り直ししたいのかなーって思った。 結論としては 楽な方法としてinput要素に状態を保存してCSSで制御する 面倒な方法として、ページ表示時にフォームの値とページの同期をとる この2つだったよ。 : Name_Not_Found [sage] 2017/10/13(金) 22:56:58.92ID:??? なんかめんどくさいのが来たな : Name_Not_Found [sage] 2017/10/13(金) 23:11:41.67ID:??? あ、ごめん。ここWeb制作板だったw いや、この話はこれで終わりでいいよ。 結論は出てるし、誰もレスしなかっただろ? : Name_Not_Found [sage] 2017/10/14(土) 00:07:49.87ID:??? ブラウザが状態を、キャッシュしているのかな? そのキャッシュが整合性が取れていないのかも キャッシュをクリアすれば? : Name_Not_Found [sage] 2017/10/14(土) 11:02:06.47ID:??? FOX52でやってみたがそうなるな キャッシュってphpのsession_cache_limiterみたいなキャッシュ制御? : Name_Not_Found [sage] 2017/10/14(土) 12:07:55.11ID:??? 読み込み時は全ての:checkedを得て再設定するとか 遷移はどうなんだろ : Name_Not_Found [sage] 2017/10/15(日) 01:49:19.04ID:??? ブラウザの戻るボタンなんて、ブラウザ毎に、動作が異なるだろ。 各ブラウザのキャッシュ機能を予測するのは、無理だろ ユーザーが、x ボタンを押してから、y ボタンを押した、という動作をした場合、 ブラウザによっては、x のJS を実行せずに、y のJS だけを実行するかも知れない もし動作を省略された、x の状態に、y が依存していれば、不整合を起こす こういう可能性が無限に考えられるから、 とにかく、キャッシュをすべてクリアして、初期化した状態から始めるべき 各ブラウザの動作などは、予測できない : Name_Not_Found [sage] 2017/10/15(日) 09:27:50.59ID:??? 何を予測するんだ? キャッシュは残る or 残らない の 二通りしか無いだろw そもそもキャッシュはユーザーにとって 快適になるからブラウザは搭載しているのであって それを無効にするのは馬鹿げてる : Name_Not_Found [sage] 2017/10/15(日) 14:21:56.80ID:??? >キャッシュをすべてクリアして、初期化した状態から始めるべき 後者はHTMLの値またはjsの定数や変数から始められるが 前者は何を指しているのかわからん まさか手動でクリアせよと? : Name_Not_Found [sage] 2017/10/15(日) 22:31:48.07ID:??? ブラウザが、キャッシュを使って復元する際、 どのようにJS を実行するか、予測できない ユーザーが、x ボタンを押してから、y ボタンを押した、という動作をした場合、 ブラウザによっては、x のJS を実行せずに、y のJS だけを実行するかも知れない 本来なら、f(x), f(y) と同じ関数を、この順番で2回実行しなければならないけど、 同じ関数の場合、最後のf(y)だけを、実行するかもしれない ブラウザは、同じイベントハンドラーを、 呼ばれた回数だけ、正しい順番で、すべて記憶して復元しないだろ。 最後の引数しか、キャッシュしていないかも知れない だから、この場合、省略されたf(x)の方に、重要な情報があった場合に、 不整合を起こすのではないか? 他にも、そもそも、JS を実行しないブラウザもあるかもしれない。 この場合は、最後の状態だけを持っていて、それを復元する とにかく、各ブラウザの挙動は、予測できない : Name_Not_Found [sage] 2017/10/15(日) 22:33:25.42ID:??? > ユーザーが、x ボタンを押してから、y ボタンを押した、という動作をした場合、 > ブラウザによっては、x のJS を実行せずに、y のJS だけを実行するかも知れない いきなりキャッシュとは関係ない話を始めたぞ。 どうするんだこいつ?w : Name_Not_Found [sage] 2017/10/15(日) 22:34:32.53ID:??? まさか、キャッシュってJavaScirptの実行処理を 頭から再生することだと思ってるのか? アホだw アホだろwww : Name_Not_Found [sage] 2017/10/16(月) 00:19:51.66ID:??? 状態保存は(おそらく)順序には関係ないだろう に以下追加するといい <a href="hoge.html">他のHTML</a> <input type="text" value=""> テキストボックスに入力して、他のページに飛ぶ その後ブラウザの戻るボタン 入力されたテキストは維持されているがaddClassのものは消えている もちろん全てのOSやブラウザで試したわけではないし、 これが保証された挙動ではないと思うが : Name_Not_Found [sage] 2017/10/16(月) 21:24:40.20ID:??? CSSに影響するパラメータが単純かつ少数であれば 要素の属性をattrで変え、CSSでは[hoge=]や[hoge*=]などで可能 ただし、例えば色を変える場合は色数が増えるごとにCSSの条件も増え、 ユーザーから#696969などの値が入る場合は不可能 よってこの方法を使える場合は限られるだろう : Name_Not_Found [sage] 2017/10/16(月) 22:59:48.61ID:??? 訂正 ユーザーから#696969などの値が入る場合は 限られているだろう。 : Name_Not_Found [sage] 2017/10/16(月) 23:08:39.49ID:??? thx ピンポイントなら可能だが事実上不可能 だった 頭ではわかってたが言葉足らずだった : Name_Not_Found [sage] 2017/10/16(月) 23:34:58.06ID:??? いや、全く分からんw ユーザーから#696969などの値が入る場合は不可能だが ユーザーから#696969などの値が入る場合なんて殆ど無い これで正確になった なおユーザーから#696969などの値が入る場合は、 動的に<style>タグを生成すれば良いだけの話 : Name_Not_Found [sage] 2017/10/17(火) 01:22:35.47ID:??? 各ブラウザによって、戻るボタンを押した際、 JS まで実行して復元するかどうかなど、わからない JS は実行しないかも知れないし、するかも知れない : Name_Not_Found [sage] 2017/10/17(火) 01:32:36.79ID:??? その場合の対応方法として、 余計なことすんなよと言いながら、キャッシュを無効にしてパフォーマンスを落とす方法と パフォーマンスを上げるためにキャッシュしてるんだね。すごい。と キャッシュされてもされなくてもどちらでも動くように作る方法 : Name_Not_Found [sage] 2017/10/17(火) 19:59:21.97ID:??? <input type="color"> ”殆ど無い”ということは可能性あるということだな 例え正規表現使おうとも先ずはそれに備えなくてはならない >動的に<style>タグを生成すれば良いだけの話 だから”属性の方法では”事実上不可能 : Name_Not_Found [sage] 2017/10/17(火) 20:38:11.34ID:??? 遅くなりすみません、です。 値や状態自体は 別にオブジェクトで、各要素やinput部にdataで、場合によりwebStrageで などで保存は可能ですが戻る進むの度に全てセットし直すということでしょうか。 そもそもそのイベントはどう捉えればいいでしょうか? プラグインやie9捨てればpushStateでできそうな気がしますが。 : Name_Not_Found [sage] 2017/10/17(火) 22:33:30.42ID:??? を見ると実現したい内容に対して 進む方向性が間違ってるってのがよく分かるな。 間違っている方法だから進むに連れて複雑になる。 : Name_Not_Found [sage] 2017/10/17(火) 23:17:01.63ID:??? もったいぶる人って何が目的なんだろ 実は知らないんじゃ : Name_Not_Found [sage] 2017/10/17(火) 23:40:09.83ID:??? 過去レス読めよって話だろ。これとか。読まないから回答が得られないんだぜ? 780 名前:Name_Not_Found[sage] 投稿日:2017/09/20(水) 23:24:03.41 ID:??? それを改善したのがこっち ttp://https://jsbin.com/japiripaxo/1/edit?html,css,js,output "> ttps://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:??? ttps://jsbin.com/japiripaxo/1/edit?html,css,js,output 不要なコード( $('input').trigger('change') )が残ってた。 訂正版 ttps://jsbin.com/xibozenopo/edit?html,css,js : Name_Not_Found [sage] 2017/10/18(水) 20:25:43.04ID:??? ←の場合でもできる?この場合どうすんだろ : Name_Not_Found [sage] 2017/10/18(水) 23:22:10.86ID:??? 行数倍になるのか、あまりスマートではないな 一般的に行われてる方法なのかな? : Name_Not_Found [sage] 2017/10/19(木) 00:19:56.61ID:??? フォームに値が残るから、 その場合は JS実行結果がキャッシュされない → JSが実行されるので値を元に色をつける JS実行結果がキャッシュされる → キャッシュされてるので色がついている ということになるので快適さを損なうこと無く ページ遷移でリセットされずに正しい動きをするよ : 966 [sage] 2017/10/19(木) 20:31:22.87ID:??? できればもっとkwsk 16x16x・・・色に対応できると? : Name_Not_Found [sage] 2017/10/19(木) 22:34:28.55ID:??? 色に対応できるかどうかというより、フォームの値のキャッシュに 対応できると行ったほうが良い 本質的な問題(問題というか理解しなければいけない点)は ブラウザはサクサク動くように戻るを押した時に フォームの値やページ内容をキャッシュすることがあるということ そしてそのキャッシュにどうすれば簡単に対応できるかということ キャッシュに対応するというのはキャッシュを破棄するという意味じゃない。 せっかくのブラウザのキャッシュを破棄するとサクサク動かなくなる。 ここまではいいかい? : Name_Not_Found [] 2017/10/20(金) 03:54:25.00:H381XtBO Rails, Angular, React などの、フレームワークのやり方に従った方がよい たいていは、サイトの戻るボタンで機能するように作るけど、 ブラウザの戻るボタンでは機能しない なぜかというと、ブラウザの戻るボタンの場合、 すでにページが解放されてしまっているから、 フレームワーク内で値をキャッシュできない その場合は、WebStorage を使うのかも。 よくわからないけど : Name_Not_Found [sage] 2017/10/20(金) 09:51:56.81ID:??? <table> <tbody> <tr> <td> <a href="" >文字列1</a> <br> 文字列2 </td> ... の時に、文字列1と2をそれぞれ取り出すには、どんなセレクターを書けば良いでしょうか? : Name_Not_Found [sage] 2017/10/20(金) 18:58:40.63ID:??? 文字列1は $("table a").text() 2は $("table td").html().split('<br>')[1] こう?trimが必要になると思う : Name_Not_Found [sage] 2017/10/20(金) 20:06:26.82ID:??? です。 せっかくですがie9で機能しないのです。 それとなるべくならHTMLにそこまでの大きな変更をしたくないです。 でもありがとうございます。 やはり戻るは捨てですかね。 現状、多さと速さ及び一部cookieに使えるので変数管理してます。 なので、保存は容易いです。 WebStorageは別件で使用してますが、cookieより容量多く記述や扱いも簡単で重宝してます。 ie8以上その他古いブラウザも対応してますし。 1行目調べてみます。ヒントありがとうございます。 : Name_Not_Found [sage] 2017/10/20(金) 22:39:26.68ID:??? ありがとうございました。 : Name_Not_Found [sage] 2017/10/20(金) 23:40:08.06ID:??? 各フレームワークのやり方を調べて、やり方がわかったら、ここで発表して Rails, Angular, React, Backborn, jQuery Mobile, Monaca(Cordova) : Name_Not_Found [sage] 2017/10/21(土) 12:38:23.66ID:??? スレチでしたら誘導お願いします ttps://www.wan55.co.jp/column/detail/id=447 絞り込み検索をするのに上のページがほぼやりたかったことに近く、使わせてもらったのですが チェックボックスでの絞り込み条件をORではなくANDにしたいです 上のDEMOでいうと「哺乳類」「だれなん?」をクリックすると「おじさん」1件のみが表示されるようにしたいのです よろしければ教えていただけないでしょうか : Name_Not_Found [sage] 2017/10/21(土) 15:32:16.67ID:??? 間違ってはないだろうよ ttp://http://ponk.jp/jquery/basic/state_save "> ttp://ponk.jp/jquery/basic/state_save ブラウザバック、キャッシュなどでググれば似たようなものはいくつも出てくる で、 : Name_Not_Found [sage] 2017/10/21(土) 17:23:02.92ID:??? #000000ってなに? : Name_Not_Found [sage] 2017/10/21(土) 20:31:21.79ID:??? 誰かを訳してほしい ちなみに >JSが実行されるので値を元に色をつける だとjsを使う分部とそうでない部分が出ると読めるが統一性が中途半端になりそう 違ったらゴメン : Name_Not_Found [sage] 2017/10/21(土) 21:43:55.31ID:??? 元のコードも、悪くはいんだけどまだまだコードが洗練されてないね。 とりあえず元のコードの半分まで減らした。ES6機能は意図的に使ってない。 ttps://jsfiddle.net/3cnkcyjk/10/ 絞り込み条件の部分は、リストの項目ごとに「tag」の値が複数入っている。 またチェックボックスもチェクされた値が複数ある。 要するにORというのは、tag配列とチェックボックス配列、 配列と配列のどれかが一致したということで、これは 配列の積集合(共通の値)の結果の配列が1個以上あるということ AND条件というのは、tag配列とチェックボックス配列の 積集合の結果の配列が、チェックボックスの配列と同じであること (ただし順不同で重複する値がないこと) 他にもやり方は有るが、ORに比べて少しややこしくなるので チェックボックスの数だけ_.everyで回して値が 全てtag配列に含まれてることを確認するのがわかりやすそうだね。 コードで書くとこうだね _.every(values, function(value) { return _.includes(item.tag, value) }) : Name_Not_Found [sage] 2017/10/21(土) 21:46:48.90ID:??? なに?ってなに?って感じだな : Name_Not_Found [sage] 2017/10/21(土) 21:58:17.11ID:??? カラーコードです : Name_Not_Found [sage] 2017/10/22(日) 04:16:08.98ID:??? CSS の黒色 black, #000000, #000 : 名無しさん@そうだ選挙に行こう! Go to vote! [sage] 2017/10/22(日) 11:22:39.88ID:??? とはカラーコードとわかっている は知らなかったのか知っててあえてそう書いたのか、それが : 名無しさん@そうだ選挙に行こう! Go to vote! [sage] 2017/10/22(日) 13:10:53.90ID:??? わざわざ書き直しまでありがとうございます! 最初動かなくて焦ったのですがunderscoreではなくlodashを使用するのですね 残念ながら初心者のためせっかく教えていただいたコードをどこに差し替えるかも分からないレベルですが 作りたいものは個人的な趣味の範囲なので焦らずじっくり学ばせていただきます 本当にありがとうございました : 名無しさん@そうだ選挙に行こう! Go to vote! [sage] 2017/10/22(日) 14:36:49.57ID:??? > 最初動かなくて焦ったのですがunderscoreではなくlodashを使用するのですね underscoreと互換性がある機能だけを使ったつもりだったんだが残念。 _() は使えず、_.chain() と書かないといけないのと _.containsで文字列が使えないんだな。 lodashの方がおすすめだが、underscore版を作っておいた。 ttps://jsfiddle.net/3cnkcyjk/12/ あとさほど大きくは変わらんのだが、ES6対応とl odash専用になるがテンプレートを書き換えた。 ttps://jsfiddle.net/3cnkcyjk/14/ : 名無しさん@そうだ選挙に行こう! Go to vote! [sage] 2017/10/22(日) 19:01:02.80ID:??? 結局965は破綻したのか : Name_Not_Found [sage] 2017/10/23(月) 06:33:52.94ID:??? 次スレ jQuery 質問スレッド vol.8 ttps://mevius.5ch.net/test/read.cgi/hp/1508707878/l50 : Name_Not_Found [sage] 2017/10/25(水) 10:32:03.29ID:??? 遅くなりましたが本当にありがとうございます お金払うレベルかと思うほど親身にして下さって感謝しています お陰様でなんとかAND検索に差し替えることもできました 助かりました、本当にありがとうございました : Name_Not_Found [sage] 2017/10/25(水) 23:14:09.98ID:??? 親身っていうかあれやな。 元のコードが挫折するほど汚かったらやる気なくなったがそこまでじゃないし、 汚くはないけど、なんかやり方間違ってるなー感があったので どこまで減らせるかネタとして面白かったからやっただけやな。 運が良かっただけだ。 : 977 [sage] 2017/10/26(木) 15:11:54.26ID:??? 981=987さんでしょうか スレが埋まるのに甘えてもう一つだけお尋ねします ttps://jsfiddle.net/3cnkcyjk/10/ このjsの最後の「テキストボックス絞り込み関数」で、名前または説明文の中に検索単語が含まれている場合に一覧を絞り込むようになっていますが 説明文(description)をタグのように[ ]でくくって複数記述していた場合、説明文からの結果が一致しないとみなされて0になってしまいます 「description」を「tag」に置き換えた場合に、テキストボックスに「類」と打つと哺乳類・鳥類・魚類・昆虫類の結果が出るようにしたいといえば伝わるでしょうか 「_.includes」を自分なりにeachをつけてみたりintersectionに変更してみたりしましたが勉強不足でうまくいきません 部分一致で結果を引っ張るためにはどうしたら良いでしょうか
凡例:
レス番
100 (赤) → 2つ以上レスが付いている
100 (紫) → 1つ以上レスが付いている
名前
名無しさん (青) → sage のレス
名無しさん (緑) → age のレス
ID
ID:xxxxxxx (赤) → 発言が3つ以上のID
ID:xxxxxxx (青) → 発言が2つ以上のID
このページは2ch勢いランキング が作成したアーカイブです。削除についてはこちら 。