私的良スレ書庫
不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitterでログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。
元スレJavaScript ライブラリ総合質問所 vol.4
JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニューみんなの評価 :
レスフィルター : (試験中)
>>349
楽天とかヤフーショッピングみたいなphp使えないサーバーがあって。。
楽天とかヤフーショッピングみたいなphp使えないサーバーがあって。。
なんとなくずっと prototype.js 使ってたんですが、
早めに jquery に移行したほうがいいですかね?
けっこう膨大な数なんで全部移行しようとすると数ヶ月はかかりそうですが
早めに jquery に移行したほうがいいですかね?
けっこう膨大な数なんで全部移行しようとすると数ヶ月はかかりそうですが
>>359
早めというか、もう遅いがw
jQueryはprototype.jsと同居できる機能を持っているから
新しい部分はjQueryに置き換えていけばいい。
俺が推奨する書き方はこう。
jQuery(function($) {
・・・jQuery用のコードを書く
});
こうすれば関数内は普通に$を使ってコードを書くことが出来る。
noConflictは、jQueryをprototype.jsよりも後に読み込む時に必要。
prptoype.jsよりも先にjQueryを読み込んでいるならなくても良い。
早めというか、もう遅いがw
jQueryはprototype.jsと同居できる機能を持っているから
新しい部分はjQueryに置き換えていけばいい。
俺が推奨する書き方はこう。
jQuery(function($) {
・・・jQuery用のコードを書く
});
こうすれば関数内は普通に$を使ってコードを書くことが出来る。
noConflictは、jQueryをprototype.jsよりも後に読み込む時に必要。
prptoype.jsよりも先にjQueryを読み込んでいるならなくても良い。
とある画面に戻るたんびに、とある変数が-1される。または+1される関数を作りたい
みんなならどうやる?
みんなならどうやる?
変数n=5;
A画面 →B画面→A画面→B画面
n=5 n=4 n=4 n=3
こんな感じにしたい。
A画面 →B画面→A画面→B画面
n=5 n=4 n=4 n=3
こんな感じにしたい。
例えば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>
ってやってもだめだった。
ってやっても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
それどうやるの?
それどうやるの?
<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の背景色しか変わらないのですが、どうすれば修正できますか?
$(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の背景色しか変わらないのですが、どうすれば修正できますか?
>>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>
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>
更に言うのなら、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>
"色" は 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>
これでいけるのか。文字数としては増えてしまったが、
親を探すという気持ち悪い処理をしなくて済む。
$(function() {
$(".but").on('click', '.ck', function(event) {
$(event.delegateTarget).toggleClass('checked', $(this).prop("checked"));
});
});
親を探すという気持ち悪い処理をしなくて済む。
$(function() {
$(".but").on('click', '.ck', function(event) {
$(event.delegateTarget).toggleClass('checked', $(this).prop("checked"));
});
});
だめだ、cookieわかんね
■質問です
下記みたいなケースで、<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で指定できるとベストです
宜しくお願いいたします。
下記みたいなケースで、<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で指定できるとベストです
宜しくお願いいたします。
タグの並びや順番に依存したセレクタがいやというなら、
順番以外でp1、p2と h2がどうつながるのかわからんのだが。
順番以外でp1、p2と h2がどうつながるのかわからんのだが。
これだけの情報なら、p1、p2の前のh2としか言いようがないと思うが
イレギュラーなタグにh2が入ってるとまずいし、
”前のh2” ってことは順番に依存してるし答えようがないな。
イレギュラーなタグにh2が入ってるとまずいし、
”前のh2” ってことは順番に依存してるし答えようがないな。
>>381
すいませんでした。
では、順番も固定で、h2も1度だけという認識で大丈夫です。
聞きたい部分としては
例えば
$(function() {
var rUrl = $('#hoge').find('h2 a').map(function() {
return $(this).attr('href');
}).get();
のようにそれぞれのh2内のaタグのhref属性値を配列等で取得した場合、
それをそれぞれに続く.p1と.p2のaタグに割り当てる方法が知りたいです。
※もちろんこの方法以外でも大丈夫です。
宜しくお願いいたします。
すいませんでした。
では、順番も固定で、h2も1度だけという認識で大丈夫です。
聞きたい部分としては
例えば
$(function() {
var rUrl = $('#hoge').find('h2 a').map(function() {
return $(this).attr('href');
}).get();
のようにそれぞれのh2内のaタグのhref属性値を配列等で取得した場合、
それをそれぞれに続く.p1と.p2のaタグに割り当てる方法が知りたいです。
※もちろんこの方法以外でも大丈夫です。
宜しくお願いいたします。
これでいいのか? 久々にeach使ったほうがわかりやすい課題だな。
でもタグをもう少し構造化したほうがいいと思うが。
仕様が奇妙
$('h2').each(function() {
var url = $(this).find('a').attr('href');
$(this).nextUntil(this.tagName).filter('.p1, .p2').find('a').attr('href', url);
});
でもタグをもう少し構造化したほうがいいと思うが。
仕様が奇妙
$('h2').each(function() {
var url = $(this).find('a').attr('href');
$(this).nextUntil(this.tagName).filter('.p1, .p2').find('a').attr('href', url);
});
やっぱりthis.tagNameよりもセレクタを指定した方がマシか
あとちょっとnextUntilの第二引数が使えた。
$('h2').each(function() {
var url = $(this).find('a').attr('href');
$(this).nextUntil('h2', '.p1, .p2').find('a').attr('href', url);
});
あとちょっとnextUntilの第二引数が使えた。
$('h2').each(function() {
var url = $(this).find('a').attr('href');
$(this).nextUntil('h2', '.p1, .p2').find('a').attr('href', url);
});
>>379
<p class="p1"><a href="">aaa</a></p>
<span class="p2"><a href="">aaa</a></span>
は後から挿入したほうがマシな気がするな。
各セクションをsection要素で括れば、appendChildしやすいだろう。
<p class="p1"><a href="">aaa</a></p>
<span class="p2"><a href="">aaa</a></span>
は後から挿入したほうがマシな気がするな。
各セクションをsection要素で括れば、appendChildしやすいだろう。
>>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>
できないようです・・。
下記であっておりますでしょうか??
<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>
Backbone.View のid/className/tag/elの違いがよくわかりません
el --> 操作対象のオブジェクト(DOM)がセットされていることはわかりましたが、id/className/tagは何のために使うんでしょうか?
それと、Backbone.Viewをインスタンス化した時に、インスタンスはDOMと必ず結び付けられていますか?
el --> 操作対象のオブジェクト(DOM)がセットされていることはわかりましたが、id/className/tagは何のために使うんでしょうか?
それと、Backbone.Viewをインスタンス化した時に、インスタンスはDOMと必ず結び付けられていますか?
IE8のみmediaqueryを読み込んでくれない
ぐぐって出る解決策は全部見たが原因わからない…誰かわかる人いたら教えてください…
ぐぐって出る解決策は全部見たが原因わからない…誰かわかる人いたら教えてください…
>>393
IE8はmediaquery(CSSの機能) をサポートしない
IE8はmediaquery(CSSの機能) をサポートしない
すみません言葉不足でした
jQueryのcss-mediaqueryを使ってるんですがなぜかIE8で読んでくれなくなって…ということでした
jQueryのcss-mediaqueryを使ってるんですがなぜかIE8で読んでくれなくなって…ということでした
そもそもmediaqueryやレスポンシブ用のCSS/JSは
PC以外に読み込まれれば良いものだから
IE8で読み込まれる想定がおかしいのでは?
PCのIE8でウインドウサイズを小さくされたときに最適化したいという事だろうか
PC以外に読み込まれれば良いものだから
IE8で読み込まれる想定がおかしいのでは?
PCのIE8でウインドウサイズを小さくされたときに最適化したいという事だろうか
>>397
mediaquery は環境に応じたデザイン/レイアウトを提供するための機能であってデバイス依存は存在しない
第一、あなたの考え方に沿うなら、PCとPC以外で出力するCSSを変化させなければならない
どのデバイスにも同じCSSを提供するのが目的だから、その考え方は根底からずれているように思う
mediaquery は環境に応じたデザイン/レイアウトを提供するための機能であってデバイス依存は存在しない
第一、あなたの考え方に沿うなら、PCとPC以外で出力するCSSを変化させなければならない
どのデバイスにも同じCSSを提供するのが目的だから、その考え方は根底からずれているように思う
>>399
もとのCSSをPCレイアウト基準で作って、モバイル、タブレット最適化にメディアクエリ使うってなら間違いでもないでしょ。
モバイルファーストなら君の言う通りだが。
そもそもどちらの方法で作ったのか?
どのCSSプロパティが効かないのか?で、
CSSのブラウザ依存問題か、jquery側の問題なのか分かれてくる。
もとの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
トップメニューへ / →のくす牧場書庫について