jQuery 質問スレッド vol.7 [無断転載禁止]©2ch.net
レス数が1000を超えています。これ以上書き込みはできません。
JavaScriptでDOM用ライブラリであるjQueryのスレです。
このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。
jQueryを使って作る側のスレであって、こんなプラグインありませんか？と聞くスレではありません。
そういうのは自分で探してください。
ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。
JavaScriptの質問は関連スレで質問して下さい。
■前スレ
+ JavaScript & jQuery 質問用スレッド vol.6 +
http://echo.2ch.net/test/read.cgi/hp/1465566635/
■関連スレ
+ JavaScript の質問用スレッド vol.122 +
http://echo.2ch.net/test/read.cgi/tech/1472426483/
+ JavaScript(ECMAScript)質問用スレッド vol.122 +
http://echo.2ch.net/test/read.cgi/tech/1472401404/
+ JavaScript の質問用スレッド vol.131 +
http://echo.2ch.net/test/read.cgi/hp/1478053599/
JavaScript ライブラリ総合質問所 vol.5 [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465399470/
+ JavaScript & jQuery 質問用スレッド vol.6 +
http://echo.2ch.net/test/read.cgi/hp/1465566635/ 「js event bubbling」で検索！
DOM イベントのバブリング。
子要素から、親要素の方向へ、イベントが伝播されていく
event.stopPropagation
イベント伝播を止める >>900
> 必要なければ余計な囲いはないほうがいい
それ大事
引継ぎで何か意味あるのかと無駄な手間が減る jqplotで凡例の項目の一部をデフォルトfalseにしたいのですが
どのようにすればできるでしょうか?
例えば以下のサンプルサイト様の凡例「花子」を
初期起動時にはデフォルトでfalseにするイメージです
http://alphasis.info/2012/04/jquery-plugin-jqplot-line_charts-legend-numberrows/
よろしくお願いします Windowを閉じる前に確認、とは親Window＝ブラウザです
>>904
具体的にお願いできないでしょうか
$('#rst').click(function(e){e.stopPropagation()});
でも同じでした >>905
それは別に大した問題じゃないかな。
一連のフォーム要素があることに対するパラメータ群であれば
formで囲えるだけじゃなくて名前もつけられる。
例えばsearch_paramsとかcustomer_infoとかね
そうするとこれは検索条件の名前なんだ、顧客の名前なんだと
意図が明確になる >>908
もっと簡単な例で、質問してくれ
何を言っているのか、さっぱり分からない >>908
こうかな？
$('#rst').click(function(e){e.preventDefault(); e.stopPropagation(); $('#fm')[0].reset();}); >>911
完璧です！邪魔だったクエリまで消えてくれて
ありがとうございます 珍しくスレ伸びてると見たらdiv厨ならぬform厨が張り付いてたのか
こんだけ拘っておいて押し付けてないってどんな神経なんだ 押し付けてないよ？
どうするのが良いかの話をしているだけであって
悪い方を選ぶのは自由だから >>916
満足とかそういう問題じゃなくて
単にあるべき姿を言ってるだけ 今回はreset()は使わないですしformは不要なので使わずにやります。
みなさんどうもでした。 白々しいｗ
わざわざ>>751のふりして、悪いやり方をしますって
宣言するとか、やるだけ無駄だってわからんの？ｗ >>917
あるべきという言葉はそれ以外を否定しているわけで結局のところ押し付けの婉曲表現です
なぜならそのあるべきから外れることは「間違いである」と言っているのと等価ですので
better to beではなくshould beまたはmust be（場合によってはshall be)ならね >>920
http://ejje.weblio.jp/content/%E3%81%82%E3%82%8B%E3%81%B9%E3%81%8D%E5%A7%BF
あるべき姿の英語
主な英訳
ideal form; ideal state
私のあるべき姿
what I should be
英語の「must」「have to」「should」の基本的な使い分け方
https://eikaiwa.weblio.jp/column/phrases/natural_english/difference_must_should_have_to
「should」は助言や提案を表す
「should」は「〜したほうがよい」というニュアンスの助動詞です。助言や提案をするときに使われるため、
「must」や「have to」に比べて強いニュアンスはありません。 >>921
should＝〜した方がいい は日本の英語教育の害悪の一つ しなければならない ・・・ must
するべきである・・・ should
ある（する）べきなんだから、それ以外を否定しているわけじゃない >>925
日本語の勉強した方がいいんじゃないか？
「〜するべき」と言われていることに反した行動をとった人がいたら普通眉をひそめるだろ？
それってどういうことか考えてみなよ >>919
いえ、本人です。
もちろん普通のお問い合わせフォームでは使ってますよ。 証拠？
つーかくだらん書き込みでクソスレ化が進んでるな >>926
日本語というより RFC2119 的な主張がされている気がしないでもない
歪曲表現を好む日本人には受け入れがたいだろうが… 基本的なことで質問です。
jsfiddleなどのサイトでなくテキストにして幾つかのブラウザ(ie9など)で。
画面の戻る進むや再読込すると、チェック状態と結果が違う場合があります。
チェック状態なのに四角だったり。
セレクトボックスやラジオでも同様なことが起こります。
どう対処してますか？ 例えば
#zi {
font-size: 12px;
text-align: center;
width: 20px;
height: 20px;
border-width: 2px;
border-style: solid;
}
.ccl {
border-radius: 50%;
}
<p><label><input type="checkbox" id="chk">○にする</label></p>
<p id="zi">あ</p>
$(function(){
$('#chk').click(function(){
if($(this).prop('checked')){
$('#zi').addClass('ccl');
}else{
$('#zi').removeClass('ccl');
}
});
}); 訂正です。
誤：幾つかのブラウザ(ie9など)で。
正：幾つかのブラウザ(ie9など)で試してもらえれば現象確認できると思います。 ちょっと見づらいからリファクタリングな
#zi {
font-size: 12px;
text-align: center;
width: 20px;
height: 20px;
border-width: 2px;
border-style: solid;
}
.ccl {
border-radius: 50%;
}
<p><label><input type="checkbox" id="chk">○にする</label></p>
<p id="zi">あ</p>
$(function(){
$('#chk').click(function(){
$('#zi').toggleClass('ccl', $(this).prop('checked'));
});
}); んで、この話はWeb製作板でこの間やったな。
input要素に状態を記録しろと。同じ話でいいならやるけど？ Web製作板で論破されて悔しいからこっちで仕切り直ししたいのかなーって思った。
結論としては
楽な方法としてinput要素に状態を保存してCSSで制御する
面倒な方法として、ページ表示時にフォームの値とページの同期をとる
この２つだったよ。 あ、ごめん。ここWeb制作板だったｗ
いや、この話はこれで終わりでいいよ。
結論は出てるし、誰もレスしなかっただろ？ ブラウザが状態を、キャッシュしているのかな？
そのキャッシュが整合性が取れていないのかも
キャッシュをクリアすれば？ FOX52でやってみたがそうなるな
キャッシュってphpのsession_cache_limiterみたいなキャッシュ制御？ 読み込み時は全ての:checkedを得て再設定するとか
遷移はどうなんだろ ブラウザの戻るボタンなんて、ブラウザ毎に、動作が異なるだろ。
各ブラウザのキャッシュ機能を予測するのは、無理だろ
ユーザーが、x ボタンを押してから、y ボタンを押した、という動作をした場合、
ブラウザによっては、x のJS を実行せずに、y のJS だけを実行するかも知れない
もし動作を省略された、x の状態に、y が依存していれば、不整合を起こす
こういう可能性が無限に考えられるから、
とにかく、キャッシュをすべてクリアして、初期化した状態から始めるべき
各ブラウザの動作などは、予測できない 何を予測するんだ？
キャッシュは残る or 残らない の
二通りしか無いだろｗ
そもそもキャッシュはユーザーにとって
快適になるからブラウザは搭載しているのであって
それを無効にするのは馬鹿げてる >キャッシュをすべてクリアして、初期化した状態から始めるべき
後者はHTMLの値またはjsの定数や変数から始められるが
前者は何を指しているのかわからん
まさか手動でクリアせよと？ ブラウザが、キャッシュを使って復元する際、
どのようにJS を実行するか、予測できない
ユーザーが、x ボタンを押してから、y ボタンを押した、という動作をした場合、
ブラウザによっては、x のJS を実行せずに、y のJS だけを実行するかも知れない
本来なら、f(x), f(y) と同じ関数を、この順番で2回実行しなければならないけど、
同じ関数の場合、最後のf(y)だけを、実行するかもしれない
ブラウザは、同じイベントハンドラーを、
呼ばれた回数だけ、正しい順番で、すべて記憶して復元しないだろ。
最後の引数しか、キャッシュしていないかも知れない
だから、この場合、省略されたf(x)の方に、重要な情報があった場合に、
不整合を起こすのではないか？
他にも、そもそも、JS を実行しないブラウザもあるかもしれない。
この場合は、最後の状態だけを持っていて、それを復元する
とにかく、各ブラウザの挙動は、予測できない > ユーザーが、x ボタンを押してから、y ボタンを押した、という動作をした場合、
> ブラウザによっては、x のJS を実行せずに、y のJS だけを実行するかも知れない
いきなりキャッシュとは関係ない話を始めたぞ。
どうするんだこいつ？ｗ まさか、キャッシュってJavaScirptの実行処理を
頭から再生することだと思ってるのか？
アホだｗ アホだろｗｗｗ 状態保存は（おそらく）順序には関係ないだろう
>>937に以下追加するといい
<a href="hoge.html">他のHTML</a>
<input type="text" value="">
テキストボックスに入力して、他のページに飛ぶ
その後ブラウザの戻るボタン
入力されたテキストは維持されているがaddClassのものは消えている
もちろん全てのOSやブラウザで試したわけではないし、
これが保証された挙動ではないと思うが CSSに影響するパラメータが単純かつ少数であれば
要素の属性をattrで変え、CSSでは[hoge=]や[hoge*=]などで可能
ただし、例えば色を変える場合は色数が増えるごとにCSSの条件も増え、
ユーザーから#696969などの値が入る場合は不可能
よってこの方法を使える場合は限られるだろう 訂正
ユーザーから#696969などの値が入る場合は
限られているだろう。 >>956
thx
ピンポイントなら可能だが事実上不可能
だった
頭ではわかってたが言葉足らずだった >>957
いや、全く分からんｗ
ユーザーから#696969などの値が入る場合は不可能だが
ユーザーから#696969などの値が入る場合なんて殆ど無い
これで正確になった
なおユーザーから#696969などの値が入る場合は、
動的に<style>タグを生成すれば良いだけの話 各ブラウザによって、戻るボタンを押した際、
JS まで実行して復元するかどうかなど、わからない
JS は実行しないかも知れないし、するかも知れない その場合の対応方法として、
余計なことすんなよと言いながら、キャッシュを無効にしてパフォーマンスを落とす方法と
パフォーマンスを上げるためにキャッシュしてるんだね。すごい。と
キャッシュされてもされなくてもどちらでも動くように作る方法 >>958
<input type="color">
”殆ど無い”ということは可能性あるということだな
例え正規表現使おうとも先ずはそれに備えなくてはならない
>動的に<style>タグを生成すれば良いだけの話
だから”属性の方法では”事実上不可能 遅くなりすみません、>>936です。
値や状態自体は
別にオブジェクトで、各要素やinput部にdataで、場合によりwebStrageで
などで保存は可能ですが戻る進むの度に全てセットし直すということでしょうか。
そもそもそのイベントはどう捉えればいいでしょうか？
プラグインやie9捨てればpushStateでできそうな気がしますが。 >>962を見ると実現したい内容に対して
進む方向性が間違ってるってのがよく分かるな。
間違っている方法だから進むに連れて複雑になる。 もったいぶる人って何が目的なんだろ
実は知らないんじゃ >>964 過去レス読めよって話だろ。これとか。読まないから回答が得られないんだぜ？
780 名前：Name_Not_Found[sage] 投稿日：2017/09/20(水) 23:24:03.41 ID:???
それを改善したのがこっち
https://jsbin.com/japiripaxo/1/edit?html,css,js,output
JavaScrpitのコードは特定の値をinput type="hidden"要素にコピーしているだけ
汎用的でコードも単純なのでバグの可能性は小さくなる
input type="hidden"にコピーしているのはキャッシュが有効に使われるようにするため
今回フォームを使うということで、検索フォームのようなものもあるかもしれない。
その場合ブラウザの標準の動きはリロードした時にフォームに前の値が残る。
値が残ったり残らなかったりするのはありえないので統一しなければいけない。
デフォルトの動きに統一する場合、input type="hidden"にコピーすることで
ブラウザの標準の動きにあわせることができる。
またブラウザの標準の動きをやめてリロード時に初期化したい場合は
form.reset()を呼び出せばいい。
また別のやり方として、input type="hidden"ではなく特定の要素、
大抵は親のブロックの何処かのclassなどに値を入れるやり方もある。
だけどこっちもフォームと混ぜた時に、リロードで値が残ったり
残らなかったりするので気をつけないといけない。
790 自分：Name_Not_Found[sage] 投稿日：2017/09/21(木) 22:57:49.28 ID:???
>>780のコード訂正
> それを改善したのがこっち
> https://jsbin.com/japiripaxo/1/edit?html,css,js,output
不要なコード（ $('input').trigger('change') ）が残ってた。
訂正版 https://jsbin.com/xibozenopo/edit?html,css,js >>955←の場合でもできる？この場合どうすんだろ 行数倍になるのか、あまりスマートではないな
一般的に行われてる方法なのかな？ >>966
フォームに値が残るから、
その場合は
JS実行結果がキャッシュされない → JSが実行されるので値を元に色をつける
JS実行結果がキャッシュされる → キャッシュされてるので色がついている
ということになるので快適さを損なうこと無く
ページ遷移でリセットされずに正しい動きをするよ >>968
できればもっとｋｗｓｋ
16x16x・・・色に対応できると？ 色に対応できるかどうかというより、フォームの値のキャッシュに
対応できると行ったほうが良い
本質的な問題（問題というか理解しなければいけない点）は
ブラウザはサクサク動くように戻るを押した時に
フォームの値やページ内容をキャッシュすることがあるということ
そしてそのキャッシュにどうすれば簡単に対応できるかということ
キャッシュに対応するというのはキャッシュを破棄するという意味じゃない。
せっかくのブラウザのキャッシュを破棄するとサクサク動かなくなる。
ここまではいいかい？ Rails, Angular, React などの、フレームワークのやり方に従った方がよい
たいていは、サイトの戻るボタンで機能するように作るけど、
ブラウザの戻るボタンでは機能しない
なぜかというと、ブラウザの戻るボタンの場合、
すでにページが解放されてしまっているから、
フレームワーク内で値をキャッシュできない
その場合は、WebStorage を使うのかも。
よくわからないけど <table>
<tbody>
<tr>
<td>
<a href="" >文字列１</a>
<br>
文字列２
</td>
...
の時に、文字列１と２をそれぞれ取り出すには、どんなセレクターを書けば良いでしょうか？ 文字列1は
$("table a").text()
2は
$("table td").html().split('<br>')[1]
こう？trimが必要になると思う >>936です。
>>965
せっかくですがie9で機能しないのです。
それとなるべくならHTMLにそこまでの大きな変更をしたくないです。
でもありがとうございます。
>>971
やはり戻るは捨てですかね。
現状、多さと速さ及び一部cookieに使えるので変数管理してます。
なので、保存は容易いです。
WebStorageは別件で使用してますが、cookieより容量多く記述や扱いも簡単で重宝してます。
ie8以上その他古いブラウザも対応してますし。
1行目調べてみます。ヒントありがとうございます。 >>974
各フレームワークのやり方を調べて、やり方がわかったら、ここで発表して
Rails, Angular, React, Backborn,
jQuery Mobile, Monaca(Cordova) スレチでしたら誘導お願いします
https://www.wan55.co.jp/column/detail/id=447
絞り込み検索をするのに上のページがほぼやりたかったことに近く、使わせてもらったのですが
チェックボックスでの絞り込み条件をORではなくANDにしたいです
上のDEMOでいうと「哺乳類」「だれなん？」をクリックすると「おじさん」１件のみが表示されるようにしたいのです
よろしければ教えていただけないでしょうか >>963
間違ってはないだろうよ
http://ponk.jp/jquery/basic/state_save
ブラウザバック、キャッシュなどでググれば似たようなものはいくつも出てくる
で、>>965の#000000対応版はまだかね？ 誰か>>979を訳してほしい
ちなみに
>JSが実行されるので値を元に色をつける
だとjsを使う分部とそうでない部分が出ると読めるが統一性が中途半端になりそう
違ったらゴメン >>977
元のコードも、悪くはいんだけどまだまだコードが洗練されてないね。
とりあえず元のコードの半分まで減らした。ES6機能は意図的に使ってない。
https://jsfiddle.net/3cnkcyjk/10/
絞り込み条件の部分は、リストの項目ごとに「tag」の値が複数入っている。
またチェックボックスもチェクされた値が複数ある。
要するにORというのは、tag配列とチェックボックス配列、
配列と配列のどれかが一致したということで、これは
配列の積集合（共通の値）の結果の配列が1個以上あるということ
AND条件というのは、tag配列とチェックボックス配列の
積集合の結果の配列が、チェックボックスの配列と同じであること
（ただし順不同で重複する値がないこと）
他にもやり方は有るが、ORに比べて少しややこしくなるので
チェックボックスの数だけ_.everyで回して値が
全てtag配列に含まれてることを確認するのがわかりやすそうだね。
コードで書くとこうだね
_.every(values, function(value) { return _.includes(item.tag, value) }) CSS の黒色
black, #000000, #000 >>978と>>980はカラーコードとわかっている
>>979は知らなかったのか知っててあえてそう書いたのか、それが>>980 >>981
わざわざ書き直しまでありがとうございます！
最初動かなくて焦ったのですがunderscoreではなくlodashを使用するのですね
残念ながら初心者のためせっかく教えていただいたコードをどこに差し替えるかも分からないレベルですが
作りたいものは個人的な趣味の範囲なので焦らずじっくり学ばせていただきます
本当にありがとうございました >>986
> 最初動かなくて焦ったのですがunderscoreではなくlodashを使用するのですね
underscoreと互換性がある機能だけを使ったつもりだったんだが残念。
_() は使えず、_.chain() と書かないといけないのと
_.containsで文字列が使えないんだな。
lodashの方がおすすめだが、underscore版を作っておいた。
https://jsfiddle.net/3cnkcyjk/12/
あとさほど大きくは変わらんのだが、ES6対応とl
odash専用になるがテンプレートを書き換えた。
https://jsfiddle.net/3cnkcyjk/14/ >>987
遅くなりましたが本当にありがとうございます
お金払うレベルかと思うほど親身にして下さって感謝しています
お陰様でなんとかAND検索に差し替えることもできました
助かりました、本当にありがとうございました 親身っていうかあれやな。
元のコードが挫折するほど汚かったらやる気なくなったがそこまでじゃないし、
汚くはないけど、なんかやり方間違ってるなー感があったので
どこまで減らせるかネタとして面白かったからやっただけやな。
運が良かっただけだ。 >>991
981=987さんでしょうか
スレが埋まるのに甘えてもう一つだけお尋ねします
https://jsfiddle.net/3cnkcyjk/10/
このjsの最後の「テキストボックス絞り込み関数」で、名前または説明文の中に検索単語が含まれている場合に一覧を絞り込むようになっていますが
説明文（description）をタグのように[ ]でくくって複数記述していた場合、説明文からの結果が一致しないとみなされて0になってしまいます
「description」を「tag」に置き換えた場合に、テキストボックスに「類」と打つと哺乳類・鳥類・魚類・昆虫類の結果が出るようにしたいといえば伝わるでしょうか
「_.includes」を自分なりにeachをつけてみたりintersectionに変更してみたりしましたが勉強不足でうまくいきません
部分一致で結果を引っ張るためにはどうしたら良いでしょうか >>992
まず最初に、wordsの名前が良くなかった。keywordsという名前に変更する
https://jsfiddle.net/3cnkcyjk/15/
最後の行、コードが重複してるなーって思っていたわけよ
（同様に word も keyword に変更している）
_.includes(item.title, keyword) || _.includes(item.description, keyword);
この部分。_.includesが二回でてる。keywordが二回出てる。気に食わない。
が、二回程度なら諦めるか。でこういうコードにした。
そこに今回さらにdescriptionが配列になる（descriptions)わけでもっと複雑になるわけだ
じゃあここで発想を変えよう。
最終的には、titleかdescriptions[0]かdescriptions[1]かdescriptions[N]のどれかに
入っていればOKということになるわけだ。
ってことはだ。
words = [item.title, item.descriptions[0], item.descriptions[1],...,item.descriptions[N]]
という配列を作っておき、この配列の文字列の何処かに含まれていればOKってことになるわけだよ。
あとは、wordsの配列の中のword文字列の中にkeywordが含まれているか？
ということで、
_.includes(item.title, keyword) || _.includes(item.description, keyword);
と等価なのは
var words = [item.title, item.description];
return _.some(words, function(word) { return _.includes(word, keyword) });
ということになる。
https://jsfiddle.net/3cnkcyjk/16/ ただよ？ これでも動くけど
これってkeywords（入力されたキーワードをスペース区切りって作った）配列と
[title, descriptiuon] 配列の全部の組み合わせを・・・
ここで気づいた。lodashにproduct関数ねぇのかよ！
例えば、["title", "description"] に ["a", "i"]のいずれかが含まれているか？っていうのは
２つの配列の全組み合わせ
"title" include? "a"
"title" include? "i"
"description" include? "a"
"description" include? "i"
となるわけだよ。これをproductとかいう関数に食わせれば話は早いんだが、ないなら仕方ない。
とりあえず今回は、順番を変えるだけで済ませよう。
return _.some(keywords, function(keyword) {
return _.some(words, function(word) {
return _.includes(word, keyword)
});
});
これでkeywordsとwordsの総当りに対して、includesを実行することになるわけだ。
https://jsfiddle.net/3cnkcyjk/17/ あとは、wordsの部分だけだな
var words = [item.title].concat(item.description);
これだけでOK
ついでにkeywordsに分割する部分の正規表現が無駄だったので修正
https://jsfiddle.net/3cnkcyjk/19/
ついでにこの_.escapeはいらないと思うので削除
https://jsfiddle.net/3cnkcyjk/20/
あとやっぱりproduct使わないと見づらいので
https://www.npmjs.com/package/lodash.product つかった
https://jsfiddle.net/3cnkcyjk/21/
そしてfilterByKeyword関数だけES6にしてみた
https://jsfiddle.net/3cnkcyjk/22/ 本当にありがとうございます
月並みな感謝の気持ちしか書けず申し訳ないです
全てを理解できるレベルには達していませんが一つ一つページ確認させてもらいました
参考にしてようやくやりたかった内容が完成しました
キーワード検索もバッチリで気持ちがいいです
（他板のスレに投稿したところスレ住民も便利だと喜んでくれました）
大変お世話になりました、ありがとうございました ∧,,,∧
( ・∀・) 1000ならジュースでも飲むか
( )
し─J このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 363日 17時間 52分 5秒 レス数が1000を超えています。これ以上書き込みはできません。
