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

>>248
$(function() {
　　$('a.target').click(function() { // 'a.on, a.off' 等でも良い
　　　　$(this).toggleClass("on off");
　　});
});

<a class="target on">クリックするたびに背景色変更</a>

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

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

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

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

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

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

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

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

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

> 　　　　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');

ないよなぁ。

>>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

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

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

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

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

>>261
radioではなく、checkboxだぞ

>>262
同じname属性値を持つことは文法上制限されてない
が、checkboxでそれをやる意義があるのか？

はぁ？

複数チェックしたら、name=1&name=2となって
サーバー側では、name = [1,2] として配列で取得できるじゃん。

これはmultipleなselectで複数選んだのと同じ。

エラーはでてないん?

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

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

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

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

jqueryのソースです

( ﾟДﾟ)y─┛~~

>>272
> 該当のタブが非アクティブの間はこの点滅アニメーションを止めておきたいのですがどうすればいいのでしょうか？

その発想が間違ってるね。

setIntervalとsetTimeoutを併用しているからそういう問題が起きるんだよ。
どっちか一つを使うようにすれば自然に問題は解決する。

あとこれは冗長
$(document).ready(function(){

jQueyrで推奨されているやり方はこっち
$(function(){

誰かdhtmlxscheduler使った事ある人いませんかね

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

知らんがな。

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

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

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

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

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

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

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

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

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

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

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

<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タグを特定すればいいのでしょうか？

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

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

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

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

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

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

>>286
こんな感じ？
css:
input[type="checkbox"].toggle{
font-size: 100%;
width: 1em;
margin: 0;
padding: 0;
opacity: 0;
}
input[type="checkbox"].toggle + label:before{
cursor: pointer;
display: inline-block;
content: "+";
margin-left: -1em;
}
input[type="checkbox"].toggle:checked + label:before{
content: "-";
}
.toggle ~ .close, .toggle:checked ~ .open {
display: none;
}
.toggle ~ .open, .toggle:checked ~ .close {
display: block;
}

html:
<input class="toggle" id="toggle-one" type="checkbox" />
<label for="toggle-one"></label><div class="open">opened contents</div><div class="close">closed contents</div>

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

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

面倒くさい奴だな

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

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

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


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


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

>>293

とりあえずで。

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

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

解決したなら礼くらい言えよな

　　　　　　　　　 _ , ，- -ｖ- - ､ _
　　　 　　　　／::::::::::::::::::::::::::::::::::::::::＼
　　　　　　 /::::::::::::::::::::::::::::::::::::::::::::::::::::ヽ
　　　　　　.(::(:::(::::／￣￣￣￣＼::::::):::)::)
　　　　　　(::(:::(:::)／・＼　　／・＼(:::):::)::)
　　　　　 .(::(:::(:::) ￣￣　　　￣￣ (:::):::)::)
　　　　　 (::(:::(:::)　　 （||||人||||）　 .(:::):::)::)　　　反省してまーす（ﾁｯ、うっせーな）
　　　　　.(::(:::(;;;)　　　 ＼　　　|　　.(;;;):::)::)　
　　　　　 (::(:::(::::＼　 　　＼＿|　／::::):::)::)
　　　　　 (::／￣|￣|＼ ||||||| ／|￣|￣＼::)
　　　　　　| 　　 .〉　|人＼_／入|　〈　　　|
　　　　　　|　 |　.|　 |　 ヽ＿/.　 |　 |　| 　|
　　　　　　|　 |　.|　 |　　.|__/.　　|　 |　| 　|
　　　　　　|　 |　ヽ　|　 ./　ヽ　　|　/　| 　|
　　　　　　|　 |　　ヽ|　 .|　　|　　|/　　| 　|
　　　　　　|　 |.　　　|　 |　　|　　|　　　| 　|
　　　　　　|＿|＿__./　 ヽ_./ 　　ヽ＿_|＿|
　　　　　 .(／:::::::::＼ __＿|＿__ ／:::::::::＼)
　　　　　　|::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::|
　　　　　　.|::::::::::::::::::::::::::::::::::::::::::::::::::::::::::|
　　　　　　 |:::::::::::::::::::::::/￣ヽ::::::::::::::::::::::|

例言えとかｗｗ

むしろ金払えｗ

$("p").prepend("<b>").append("</b>");

$("p").before("<b>").after("</b>");

この二つが反映されない理由はなんですか？
反映させる方法はありますか？

<script type="text/javascript">
function Display(no){
var name = document.getElementById("name").value;
var num=0;
if(name.length < 2){
alert("名前は2字以上でお願いしますだ。")
return false;
}else{
if(num ==0){
document.getElementById("SW1").style.display = "none";
document.getElementById("SW2").style.display = "block";
}
}
</script>
<body>
<div id="SW1">
<p>これはSW1のエリアです。上記SW2をクリックすると消えます。</p>
<form onsubmit="return _submit();">
名前：<input type="text" id="name" name="name" value=""><br>
<input type="submit" value="送信" onclick="Display('no1')"><br>
</div>
<div id="SW2" style="display:none;">
<p>これはSW2のエリアです。上記SW1をクリックすると消えます。</p>
<p>あなたの名前は<script type="text/javascript">+ name + </script>です。</p>
</div>
ボタンを押したら<div id=SW2>の画面に切り替わるようにしたいです。