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

JavaScript覧

前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで

351 = :

>>349
楽天とかヤフーショッピングみたいなphp使えないサーバーがあって。。

352 = :

>>351
だからJS醸成するからSEO対策になってないんじゃない
作業を効率化するなら制作環境でテンプレートエンジンを使うぐらいしかないでしょ

354 = :

>>352
うん。質問の意図としては
jquery-tmplって便利？問題は特にない？ってことを聞きたかったんだが。

355 = :

テンプレートとか使うレベルならMVCにするんじゃね？

357 = :

>>356
すればいい。だがグローバル変数は使うな。
ローカル変数を変えればいいだろ。

358 = :

変数の意味分かってるのかねｗ

359 :

なんとなくずっと prototype.js 使ってたんですが、
早めに jquery に移行したほうがいいですかね？
けっこう膨大な数なんで全部移行しようとすると数ヶ月はかかりそうですが

360 = :

>>359
早めというか、もう遅いがｗ

jQueryはprototype.jsと同居できる機能を持っているから
新しい部分はjQueryに置き換えていけばいい。

俺が推奨する書き方はこう。

jQuery(function($) {
・・・jQuery用のコードを書く

});

こうすれば関数内は普通に$を使ってコードを書くことが出来る。　

noConflictは、jQueryをprototype.jsよりも後に読み込む時に必要。
prptoype.jsよりも先にjQueryを読み込んでいるならなくても良い。

364 = :

そのまま組めよｗ

365 = :

そのまま組む方法がわからんぜ。っフ

366 = :

例えばB画面の時に<script language=javascript> n=n-1</script>
ってやってもＡ画面に戻ったらn=5のまんまなんだよ。

>>357の書き込みを見て
function tan(a) {
var a=5;
sessionStorage.setItem("formdata",a);
var n = sessionStorage.getItem("formdata");
n=n-1;
return n;
}
って関数作って、<p><script language=javascript>document.write(tan())</script></p>
ってやってもだめだった。

367 = :

そりゃ画面遷移するならクッキー食わせなきゃだめだろｗ

368 = :

>>367
それどうやるの？

369 = :

ぐぐれよ

370 = :

画面遷移　クッキー　で探してみるわ
色々ありがとう

371 = :

<script language="JavaScript">
$(function() {
$(".ck").click(function(){

var test = $(".ck").prop("checked");

if(test === true){

$(this).parent(".but").css("background-color","rgb(255, 153, 204)");

}else{

$(this).parent(".but").css("background-color","rgb(238, 238, 238)");

}
});
});
</script>

<div class="but">
<input type="checkbox" name="ss" value="ss" class="ck" />
</div>

<div class="but">
<input type="checkbox" name="ss" value="ss" class="ck" />
</div>

<div class="but">
<input type="checkbox" name="ss" value="ss" class="ck" />
</div>

一番上のdivの背景色しか変わらないのですが、どうすれば修正できますか？

372 = :

>>371
languageはHTML 4.01の時代から
とっくに非推奨になってる古い属性であり、
今はtypeだがhtmlでは省略できるのだから不要。

css()の行がムダに長い。少なくともこう書くべき。
var color = test ? "rgb(255, 153, 204)" : "rgb(238, 238, 238)";
$(this).parent(".but").css("background-color", color);

testは意味がわかりにくいのでcheckedにしよう。$(".ck")は$(this)とか書くべき。
でないと。.ckの一番最初のcheckedの判定になる。
これじゃねーのバグは？ｗ 俺がやると変なコードを直してるだけでバグも直せてしまうｗ

あと適度にスペースを入れよう。

<script>
$(function() {
　　$(".ck").click(function() {
　　　　var checked = $(this).prop("checked");
　　　　var color = checked ? "rgb(255, 153, 204)" : "rgb(238, 238, 238)";
　　　　$(this).parent(".but").css("background-color", color);
　　});
});
</script>

373 = :

更に言うのなら、css()メソッドは使うべきではない。
"色" は cssファイルもしくはstyle要素で決めて、
JavaScriptからはclassを指定するべきだ。

<style>
　.but { background-color: rgb(255, 153, 204) }
　.but.checked { background-color: rgb(238, 238, 238) }
</style>

そうすると、コードはここまで減る。
<script>
$(function() {
　　$(".ck").click(function() {
　　　　$(this).parent(".but").toggleClass('checked', $(this).prop("checked"));
　　});
});
</script>

374 = :

これでいけるのか。文字数としては増えてしまったが、
親を探すという気持ち悪い処理をしなくて済む。

$(function() {
　　$(".but").on('click', '.ck', function(event) {
　　　　$(event.delegateTarget).toggleClass('checked', $(this).prop("checked"));
　　});
});

375 = :

>>372-374

ありがとうございます。
ここまで短くなるんですね

376 = :

>>374
>>313もお願いします

378 = :

だめだ、cookieわかんね

379 = :

■質問です
下記みたいなケースで、<p　class="p1">、<p　class="p2">内にあるaタグのhref属性を
それぞれの<h2>内のaタグのhref属性と同じにしたい場合、どのように書けばよいでしょうか。

<div id="hoge">
<h2><a href="http:aaa.com/">1</a></h2>
～イレギュラーなタグ～
<p　class="p1"><a href="">aaa</a></p>
<span　class="p2"><a href="">aaa</a></span>

<h2><a href="http:bbb.com/">2</a></h2>
～イレギュラーなタグ～
<p　class="p1"><a href="">bbb</a></p>
<span　class="p2"><a href="">bbb</a></span>

<h2><a href="http:ccc.com/">3</a></h2>
～イレギュラーなタグ～
<p　class="p1"><a href="">ccc</a></p>
<span　class="p2"><a href="">ccc</a></span>
</div>

それぞれのhref属性を変数のようにしたいのと、もし可能であればタグの並びや順番に依存したセレクタではなく、
classで指定できるとベストです

宜しくお願いいたします。

380 = :

タグの並びや順番に依存したセレクタがいやというなら、
順番以外でp1、p2と h2がどうつながるのかわからんのだが。

381 = :

これだけの情報なら、p1、p2の前のh2としか言いようがないと思うが
イレギュラーなタグにh2が入ってるとまずいし、
”前のh2” ってことは順番に依存してるし答えようがないな。

382 = :

>>381
すいませんでした。
では、順番も固定で、h2も1度だけという認識で大丈夫です。

聞きたい部分としては
例えば
$(function() {
var rUrl = $('#hoge').find('h2 a').map(function() {
return $(this).attr('href');
}).get();
のようにそれぞれのh2内のaタグのhref属性値を配列等で取得した場合、
それをそれぞれに続く.p1と.p2のaタグに割り当てる方法が知りたいです。

※もちろんこの方法以外でも大丈夫です。

宜しくお願いいたします。

383 = :

これでいいのか？ 久々にeach使ったほうがわかりやすい課題だな。
でもタグをもう少し構造化したほうがいいと思うが。
仕様が奇妙

$('h2').each(function() {
　　var url = $(this).find('a').attr('href');
　　$(this).nextUntil(this.tagName).filter('.p1, .p2').find('a').attr('href', url);
});

384 = :

やっぱりthis.tagNameよりもセレクタを指定した方がマシか
あとちょっとnextUntilの第二引数が使えた。

$('h2').each(function() {
　　var url = $(this).find('a').attr('href');
　　$(this).nextUntil('h2', '.p1, .p2').find('a').attr('href', url);
});

386 = :

>>384
できないようです・・。
下記であっておりますでしょうか？？
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$('h2').each(function() {
var url = $(this).find('a').attr('href');
$(this).nextUntil('h2', '.p1, .p2').find('a').attr('href', url);
});
});
</script>

<div id="hoge">
<h2><a href="http:aaa.com/">1</a></h2>
<p　class="p1"><a href="">aaa</a></p>
<span　class="p2"><a href="">aaa</a></span>

<h2><a href="http:bbb.com/">2</a></h2>
<p　class="p1"><a href="">bbb</a></p>
<span　class="p2"><a href="">bbb</a></span>

<h2><a href="http:ccc.com/">3</a></h2>
<p　class="p1"><a href="">ccc</a></p>
<span　class="p2"><a href="">ccc</a></span>
</div>

387 = :

>>386
あー、根本的な所を間違ってるよ。

君、URL間違ってるから。

388 = :

全角空白だな

389 = :

>>388
それもあったなｗ

明らかにわかる所は、無意識に修正しちゃったからなｗ

390 = :

なんかワロタｗｗｗ

391 = :

ぐはっ
なんで全角だ？？

できました。有難うございました！

392 = :

Backbone.View のid/className/tag/elの違いがよくわかりません
el --> 操作対象のオブジェクト(DOM)がセットされていることはわかりましたが、id/className/tagは何のために使うんでしょうか？

それと、Backbone.Viewをインスタンス化した時に、インスタンスはDOMと必ず結び付けられていますか？

394 = :

>>393
qｕｅｒｙ違い。

まあｊＱｕｅｒｙでも解決できるだろうけど

396 = :

すみません言葉不足でした
ｊＱｕｅｒｙのcss-mediaqueryを使ってるんですがなぜかIE8で読んでくれなくなって…ということでした

397 = :

そもそもmediaqueryやレスポンシブ用のCSS/JSは
PC以外に読み込まれれば良いものだから
IE8で読み込まれる想定がおかしいのでは？

PCのIE8でウインドウサイズを小さくされたときに最適化したいという事だろうか

398 = :

>>396
例えばこれとか
http://d.hatena.ne.jp/kzhrk/touch/20121022/1350920894

399 = :

>>397
mediaquery は環境に応じたデザイン/レイアウトを提供するための機能であってデバイス依存は存在しない
第一、あなたの考え方に沿うなら、PCとPC以外で出力するCSSを変化させなければならない
どのデバイスにも同じCSSを提供するのが目的だから、その考え方は根底からずれているように思う

400 = :

>>399
もとのCSSをPCレイアウト基準で作って、モバイル、タブレット最適化にメディアクエリ使うってなら間違いでもないでしょ。
モバイルファーストなら君の言う通りだが。
そもそもどちらの方法で作ったのか？
どのCSSプロパティが効かないのか？で、
CSSのブラウザ依存問題か、jquery側の問題なのか分かれてくる。

前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで / JavaScript一覧へ

類似してるかもしれないスレッド

• JavaScript ライブラリ総合質問所 vol.5 (344) - [97%] - 2022/3/14 17:45
• jQuery ライブラリ 総合質問所 vol.4 (986) - [78%] - 2016/1/12 15:15
• 【jQuery】JavaScript ライブラリ総合質問所 vol.3 (1001) - [75%] - 2014/6/18 20:58 △
• 【jQuery】JavaScript ライブラリ総合質問所 vol.2 (986) - [75%] - 2013/5/20 7:00
• 【jQuery】JavaScript ライブラリ総合質問所 vol.1 (983) - [75%] - 2012/10/8 22:30
• [JavaScript]プログラム作成します (981) - [37%] - 2010/12/8 21:02