元スレJavaScript ライブラリ総合質問所 vol.4

みんなの評価 :

前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ

/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで

251 = :

>>246
<script>
$(function() {
　　$("button").click(function(){
　　　　$("textarea").val(function() {
　　　　　　return $('.test input:checked + span').last().html();
　　　　});
　　});
});
</script>

253 = :

>>246
ごめん。間違えてた。

訂正
<script>
$(function() {
　　$("button").click(function(){
　　　　$("textarea").val(function() {
　　　　　　return $('.test input:checked + span').map(function() {
　　　　　　　　return $(this).html();
　　　　　　}).get().join('');
　　　　});
　　})
});
</script>

254 = :

>>251-251
解決済みの質問に回答しなくてもいいのでは

255 = :

>>254
解決したと書いてあるだけで、そのコードが載っていない

それは、質問をするだけして自己解決しました。といって
去っていくやからと同じで、他の人の参考にならない。

またプロ品質の仕事としては、かろうじて動いていたとしても
無駄があるコードは、品質が低くコードレビューで弾かれる。
つまり未完成のコードと同じで、完成してない（解決済みではない）ということ。

256 = :

こっちの方が一行少なくてわかりやすいか。

$(function() {
　　$("button").click(function(){
　　　　var text = $('.test input:checked + span').map(function() {
　　　　　　return $(this).html();
　　　　}).get().join('');
　　　　$("textarea").val(text);
　　})
});

通常、valでfuncitonを引数にした時、thisを参照するんだけど
でも今回はthisを参照しないから、分けて書いたほうが良さそう。

257 = :

> 　　　　var text = $('.test input:checked + span').map(function() {
> 　　　　　　return $(this).html();
> 　　　　}).get().join('');

これを一行で書く方法ないかな？時々こういうコード書くんだよね。

.get().join('')は次の行に移動できるから無視するとして。

仮にjQuery プラグインを作ったとしたら、こんな感じでjQueryオブジェクトの
配列から、htmlメソッドを呼び出した結果を配列で返すみたいな。

var texts = $('.test input:checked + span').retrieve('html');

ないよなぁ。

258 = :

>>255
プロを名乗るならまず、設計上の問題点を指摘すべきだと思うが

>>248
レイアウトの為にbr要素を使うべきではない
input要素のname属性は同じformコントロール下であればユニークであるべきだ
span要素はlabel要素に置き換わるべきだ(そうすればinput要素との対応関係も明確になる)
$("button").click() は全てのbutton要素にイベントを定義してしまう
$("textarea").val() は全てのtextarea要素を書き換えてしまう
そもそも、同じフォームコントロール下におけばclass="test" は不要だ(form内の全 input[type=checkbox] を対象にすればよい)

>>248,250
on, offの2パターンしかないのに on, off を付け替えるのは明らかに無駄だ
onの有無で十分に判定できるはずだ
2つのclass名を使い分けるのは4パターンのUIが必要な時に限定される

また、そもそも論としてa要素でこれをマークアップするのもおかしい
UIとしてはcheckboxに相当するのだから <input type="checkbox"> でマークアップしてCSSで装飾するのが妥当だろう
<input type="checkbox"> のデフォルトUIが嫌なら WAI-ARIA を使えば良い
ようするにclass属性を使う必要は全くない
http://www.hitachi.co.jp/universaldesign/ria/ajax/wai-aria/wd_20090224/index.html#button
http://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role

259 = :

解決済みの質問に回答するやつ同士勝手にしてくれ

260 = :

JavaScriptのスレで指摘点が
HTMLとはね（苦笑）

261 = :

>>258
> input要素のname属性は同じformコントロール下であればユニークであるべきだ
違うだろ。radioは同じnameを作らないといけない。
ユニークであるべきなどとは仕様のどこにも書いてない。

262 = :

getElementById が単数形で
getElementsByName が複数形なのには
理由があるんだよ。

269 = :

エラーはでてないん?

chrome.tabs.executeScript() のcallbackで次のchrome.tabs.executeScript()
を実行してみてはどうだろう

270 = :

>>269
できました！ありがとうございます。
ここに書いたコードでもエラーは出てなくて、もしコールバックしてないから動かないなら「$が定義されていません」みたいなエラーが出るはずだと思ってスルーしてました。

271 = :

http://jobinjapan.jp/job-listing/keyword-javascript.html

273 = :

jqueryで式の頭に!!をつけるのはどういう意図があるのですか？
手っ取り早くbooleanに変換するためでしょうか？

274 = :

jqueryのソースです

278 = :

jQueryでスマホサイト等に
クリックで開閉するよくあるヤツ。
「＋」「-」マークを切り替える場合、簡潔なソースはどんな感じになるでしょうか？

279 = :

知らんがな。

280 = :

タブ切り替えについて質問。

ページ表示の際に開くタブを指定は可能でしょうか？

例えば飛び元ページからURLにパラメーターを付けてリンクさせ、
それを取得して開くタブを切り替えるなど・・。

どうやっていいか全くわかんないけど

281 = :

>>278
完結なコードはjQueryどころか
JavaScriptコード一切ないよ。

+-マークを切り替えるというのは、
抽象化して考えると、チェックのON・OFFで表せる。
つまりチェックボックスだ。

あとはCSSで、checkされたボックスの配下や次にある
要素を表示したりしなかったりするだけ。

282 = :

まあ、レイアウトや対応ブラウザのCSS対応の制限で
実装しにくい時もあるが、そういう時は

$('input[type=checkbox]').on('click', function() {
　$(チェックボックスに対応するブロックのセレクタ).toggleClass(クラス名, this.checked);
});

まあ、これだけだろうね。

+-マークについてはCSSで実装できないブラウザはないから不要だろうな。

283 = :

<div class="test">
<button>button</button>
<div class="text">
text
</div>
</div>

<div class="test">
<button>button</button>
<div class="text">
text
</div>
</div>

ボタンをクリックしたらtext部分ににタグを挿入したいのですが、やり方がさっぱりわかりません
thisを使った場合どうやってdivタグを特定すればいいのでしょうか？

284 = :

>>283
buttonからdivタグを特定するにもいろいろ道があるよね
たとえば親の要素以下のdivなら $(this).parent().find('div') だけど
divのようなタグ名ではなくclassで指定したいとか、buttonの隣にあるdivがいいとか
違った道もある(HTMLがもう二度と変更されることがないなら気にする必要はないけれど)
その辺を決めてからhttp://api.jquery.com/category/traversing/ をながめてみればいいんではないかな

285 = :

>>284
ありがとうございます

286 = :

>>281,>>282
ありがとう
チェックボックスの発想はなかった。。
クラスをトグルするってことは、背景画像で＋と-の画像を切り替えってことか。
スマホだと背景画像の解像度とかサイズとか面倒じゃない？

287 = :

>>286
アコーディオンでcheckboxってあまり見ないような・・・？
普通に見出しとかdivとかをクリックさせて、アコーディオンさせるとこをslideToggleで開閉が多い気がするけど。
＋-は画像だとめんどいのでWEBフォント使ってCSSでbeforeなりafterなりに設定するのがラクなきが最近はしてるけどどうなんじゃろ。
■好きなアイコンでWebフォントを作るサービス「IcoMoon」が熱い！ - iLOG
http://i-i-news.com/2013/08/icon-webfont7/

288 = :

>>286
Media Queries
というか、ツリー表示が有用なのはある程度大きな画面サイズを持つタブレット以上であってスマホで生きるとは思わないけどね

>>287
見るか見ないかじゃなくて、論理構造として正しいかという話をしているんだと思うけど
多数派の手法が必ずしも良いとは限らない

290 = :

>>287
> アコーディオンでcheckboxってあまり見ないような・・・？

念の為に言っておくと、完結なコードと言われたので
最小限のコードを言ったまでで、文書構造で言えば
適切ではないなとは思ってる。

291 = :

面倒くさい奴だな

292 = :

>>287,287
ありがとう。
どちらも参考になった。

before疑似要素使えば済む話だった。orz

293 = :

初歩的な質問で申し訳ないのですが
たとえば.buttonを押すと.boxの高さが50pxずつ増えるという動きを実装したとき、MAXが400pxまでと
したい場合(.boxの高さが400pxまで増えたら.buttonを消す)はどういう風に書けばいいですか？

$('.button').click(
function(){
$('.box').stop().animate({'height':'+=50px'},200);

ここまではともかく、このあとの
「boxの高さが400px以上に達した場合、buttonの表示を消す」という部分の書き方がわかりません・・・

294 = :

>>293

とりあえずで。

$('.button').click(function (){
$('.box').stop().animate({'height':'+=50px'},200);
var bH = $('.box').height();
$('.box').after(bH);//不要

if(bH > 150){
$('.button').hide();
}
});