のくす牧場
コンテンツ
牧場内検索
カウンタ
総計:127,645,761人
昨日:no data人
今日:
最近の注目
人気の最安値情報

私的良スレ書庫

不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitter
ログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。

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

JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニュー
スレッド評価: スレッド評価について
みんなの評価 :
タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。
レスフィルター : (試験中)
←前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitter
351 : Name_Not - 2014/09/14(日) 00:02:21.15 ID:???.net (+35,-25,-17)
>>349
楽天とかヤフーショッピングみたいなphp使えないサーバーがあって。。
352 : Name_Not - 2014/09/14(日) 00:14:19.45 ID:???.net (+66,+26,-36)
>>351
だからJS醸成するからSEO対策になってないんじゃない
作業を効率化するなら制作環境でテンプレートエンジンを使うぐらいしかないでしょ
353 : Name_Not - 2014/09/14(日) 00:48:04.04 ID:???.net (-2,-25,-13)
× JS醸成
○ JS強制
354 : Name_Not - 2014/09/14(日) 01:02:11.51 ID:???.net (+11,-24,-27)
>>352
うん。質問の意図としては
jquery-tmplって便利?問題は特にない?ってことを聞きたかったんだが。
355 : Name_Not - 2014/09/14(日) 14:26:04.05 ID:???.net (+1,-26,-17)
テンプレートとか使うレベルならMVCにするんじゃね?
357 : Name_Not - 2014/09/14(日) 16:31:11.46 ID:???.net (+6,-28,-47)
>>356
すればいい。だがグローバル変数は使うな。
ローカル変数を変えればいいだろ。
358 : Name_Not - 2014/09/14(日) 16:48:32.10 ID:???.net (+30,+7,-2)
変数の意味分かってるのかねw
359 : Name_Not - 2014/09/14(日) 17:12:13.88 ID:nZnN2Xzj.net (+31,+29,-54)
なんとなくずっと prototype.js 使ってたんですが、
早めに jquery に移行したほうがいいですかね?
けっこう膨大な数なんで全部移行しようとすると数ヶ月はかかりそうですが
360 : Name_Not - 2014/09/14(日) 18:59:01.08 ID:???.net (+7,-30,-208)
>>359
早めというか、もう遅いがw

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

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

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

});

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

noConflictは、jQueryをprototype.jsよりも後に読み込む時に必要。
prptoype.jsよりも先にjQueryを読み込んでいるならなくても良い。
361 : Name_Not - 2014/09/14(日) 19:18:36.74 ID:???.net (+0,-27,-10)
とある画面に戻るたんびに、とある変数が-1される。または+1される関数を作りたい
みんなならどうやる?
362 : Name_Not - 2014/09/14(日) 19:20:28.59 ID:???.net (-1,-29,-4)
if (とある画面) {
 とある変数--;
}
363 : Name_Not - 2014/09/14(日) 19:41:02.94 ID:???.net (-1,-29,-9)
変数n=5;

A画面 →B画面→A画面→B画面
n=5 n=4    n=4   n=3

こんな感じにしたい。
364 : Name_Not - 2014/09/14(日) 19:43:18.90 ID:???.net (+47,+24,-1)
そのまま組めよw
365 : Name_Not - 2014/09/14(日) 19:46:26.84 ID:???.net (+50,+27,-2)
そのまま組む方法がわからんぜ。っフ
366 : Name_Not - 2014/09/14(日) 19:51:36.10 ID:???.net (+13,-30,-93)
例えばB画面の時に<script language=javascript> n=n-1</script>
ってやってもA画面に戻ったら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 : Name_Not - 2014/09/14(日) 20:00:12.99 ID:???.net (+89,+29,-6)
そりゃ画面遷移するならクッキー食わせなきゃだめだろw
368 : Name_Not - 2014/09/14(日) 20:27:25.32 ID:???.net (+64,+29,-2)
>>367
それどうやるの?
369 : Name_Not - 2014/09/14(日) 20:35:58.62 ID:???.net (+46,+28,+0)
ぐぐれよ
370 : Name_Not - 2014/09/14(日) 20:46:20.58 ID:???.net (+57,+29,-7)
画面遷移 クッキー で探してみるわ
色々ありがとう
371 : Name_Not - 2014/09/15(月) 02:27:39.15 ID:???.net (+9,-30,-202)
<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 : Name_Not - 2014/09/15(月) 04:47:59.28 ID:???.net (+38,-30,-250)
>>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の判定になる。
これじゃねーのバグは?w 俺がやると変なコードを直してるだけでバグも直せてしまうw

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

<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 : Name_Not - 2014/09/15(月) 04:54:16.35 ID:???.net (+3,-30,-151)
更に言うのなら、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 : Name_Not - 2014/09/15(月) 05:27:19.76 ID:???.net (+32,-30,-85)
これでいけるのか。文字数としては増えてしまったが、
親を探すという気持ち悪い処理をしなくて済む。

$(function() {
  $(".but").on('click', '.ck', function(event) {
    $(event.delegateTarget).toggleClass('checked', $(this).prop("checked"));
  });
});
375 : Name_Not - 2014/09/15(月) 06:22:09.02 ID:???.net (+73,+29,+0)
>>372-374

ありがとうございます。
ここまで短くなるんですね
376 : Name_Not - 2014/09/15(月) 16:14:49.38 ID:???.net (+32,+20,+0)
>>374
>>313もお願いします
378 : 366 - 2014/09/15(月) 21:02:51.06 ID:???.net (+27,+4,-11)
だめだ、cookieわかんね
379 : Name_Not - 2014/09/18(木) 23:31:05.20 ID:???.net (+5,-30,+0)
■質問です
下記みたいなケースで、<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 : Name_Not - 2014/09/18(木) 23:50:21.67 ID:???.net (+57,+29,-23)
タグの並びや順番に依存したセレクタがいやというなら、
順番以外でp1、p2と h2がどうつながるのかわからんのだが。
381 : Name_Not - 2014/09/19(金) 00:37:16.55 ID:???.net (+64,+29,-46)
これだけの情報なら、p1、p2の前のh2としか言いようがないと思うが
イレギュラーなタグにh2が入ってるとまずいし、
”前のh2” ってことは順番に依存してるし答えようがないな。
382 : 375 - 2014/09/19(金) 03:07:43.87 ID:???.net (+11,-30,-120)
>>381
すいませんでした。
では、順番も固定で、h2も1度だけという認識で大丈夫です。

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

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

宜しくお願いいたします。
383 : Name_Not - 2014/09/19(金) 03:57:09.00 ID:???.net (+3,-30,-97)
これでいいのか? 久々にeach使ったほうがわかりやすい課題だな。
でもタグをもう少し構造化したほうがいいと思うが。
仕様が奇妙

$('h2').each(function() {
  var url = $(this).find('a').attr('href');
  $(this).nextUntil(this.tagName).filter('.p1, .p2').find('a').attr('href', url);
});
384 : Name_Not - 2014/09/19(金) 04:46:52.02 ID:???.net (+9,-30,-86)
やっぱりthis.tagNameよりもセレクタを指定した方がマシか
あとちょっとnextUntilの第二引数が使えた。

$('h2').each(function() {
  var url = $(this).find('a').attr('href');
  $(this).nextUntil('h2', '.p1, .p2').find('a').attr('href', url);
});
385 : Name_Not - 2014/09/19(金) 09:42:27.98 ID:???.net (-1,-30,-94)
>>379
<p class="p1"><a href="">aaa</a></p>
<span class="p2"><a href="">aaa</a></span>

は後から挿入したほうがマシな気がするな。
各セクションをsection要素で括れば、appendChildしやすいだろう。
386 : Name_Not - 2014/09/20(土) 01:17:21.43 ID:???.net (+36,-30,-299)
>>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 : Name_Not - 2014/09/20(土) 01:44:53.29 ID:???.net (+62,+29,-6)
>>386
あー、根本的な所を間違ってるよ。

君、URL間違ってるから。
388 : Name_Not - 2014/09/20(土) 08:00:38.11 ID:???.net (+56,+4,-15)
全角空白だな
389 : Name_Not - 2014/09/20(土) 08:38:31.85 ID:???.net (+65,+29,-7)
>>388
それもあったなw

明らかにわかる所は、無意識に修正しちゃったからなw
390 : Name_Not - 2014/09/20(土) 19:14:54.91 ID:???.net (+38,+15,-2)
なんかワロタwww
391 : Name_Not - 2014/09/21(日) 02:20:02.55 ID:???.net (+57,+29,-30)
ぐはっ
なんで全角だ??

できました。有難うございました!
392 : Name_Not - 2014/09/21(日) 21:44:37.05 ID:???.net (+3,-30,-114)
Backbone.View のid/className/tag/elの違いがよくわかりません
el --> 操作対象のオブジェクト(DOM)がセットされていることはわかりましたが、id/className/tagは何のために使うんでしょうか?

それと、Backbone.Viewをインスタンス化した時に、インスタンスはDOMと必ず結び付けられていますか?
393 : Name_Not - 2014/09/23(火) 12:21:39.87 ID:uhiGJoNF.net (-28,-28,-30)
IE8のみmediaqueryを読み込んでくれない
ぐぐって出る解決策は全部見たが原因わからない…誰かわかる人いたら教えてください…
394 : Name_Not - 2014/09/23(火) 16:59:02.05 ID:???.net (+27,-27,-18)
>>393
query違い。

まあjQueryでも解決できるだろうけど
395 : Name_Not - 2014/09/23(火) 18:52:39.72 ID:???.net (-11,-29,-26)
>>393
IE8はmediaquery(CSSの機能) をサポートしない
396 : Name_Not - 2014/09/23(火) 19:28:55.19 ID:???.net (+65,-29,-43)
すみません言葉不足でした
jQueryのcss-mediaqueryを使ってるんですがなぜかIE8で読んでくれなくなって…ということでした
397 : Name_Not - 2014/09/23(火) 23:11:38.89 ID:???.net (+73,-29,-90)
そもそもmediaqueryやレスポンシブ用のCSS/JSは
PC以外に読み込まれれば良いものだから
IE8で読み込まれる想定がおかしいのでは?

PCのIE8でウインドウサイズを小さくされたときに最適化したいという事だろうか
398 : Name_Not - 2014/09/24(水) 01:34:11.77 ID:???.net (+57,+24,-1)
399 : Name_Not - 2014/09/24(水) 10:04:53.86 ID:???.net (+104,+29,-58)
>>397
mediaquery は環境に応じたデザイン/レイアウトを提供するための機能であってデバイス依存は存在しない
第一、あなたの考え方に沿うなら、PCとPC以外で出力するCSSを変化させなければならない
どのデバイスにも同じCSSを提供するのが目的だから、その考え方は根底からずれているように思う
400 : Name_Not - 2014/09/24(水) 15:17:24.73 ID:???.net (+110,+29,-128)
>>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 スレッド一覧へ
スレッド評価: スレッド評価について
みんなの評価 :
タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。

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


トップメニューへ / →のくす牧場書庫について