+ JavaScript & jQuery 質問用スレッド vol.8 +
■ このスレッドは過去ログ倉庫に格納されています
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-4のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。
+ JavaScript & jQuery 質問用スレッド vol.7 + [無断転載禁止]©2ch.net
http://mevius.2ch.net/test/read.cgi/hp/1467906819/ >>246
私の説明が下手だとは思うのですが、
第一希望のラジオグループと、第二希望、第三希望のラジオグループがあって、
それぞれ同じ項目を持っており、一つのラジオグループで選択された項目を
他のラジオグループではdisabledにしたいのです。
全部書かずに省略した"・・・"なのです。 jQueryのchange()によるイベント処理操作まとめ！
https://www.sejuku.net/blog/41231
ラジオボタンのchangeイベントで、
一つのラジオグループで選択された項目を、
他のラジオグループではdisabledに設定すれば？
>name="第一希望"
半角文字以外を使うな >>249
そうするために、要素（添え字）の数を知りたいと思っているのですが・・・。
val()で値を取得して、該当するものを探す方法でもいいんですがそれが
わからないので質問しているのです。ご紹介のサイトでは
説明をみつけられませんでした。
（値が同じという前提ではないので、値は使いたくないのですが、
それでも構いません）
ANK不使用については大前提なのです。 なにやりたいのさっぱりだっから、これよんで勉強しろ
<input name="group" type="radio" value="1">1
<input name="group" type="radio" value="2">2
<input name="group" type="radio" value="3">3
<input name="group" type="radio" value="4">4
<input name="group" type="radio" value="5">5
$('[name="group"]').on('change', function() {
alert($(this.form || document).find('[name="group"]').index(this));
}); <div id="radio_1">
<input type="radio" name="radio_1" value="1">
<input type="radio" name="radio_1" value="2">
<input type="radio" name="radio_1" value="3">
</div>
<div id="radio_2">
<input type="radio" name="radio_2" value="a">
<input type="radio" name="radio_2" value="b">
<input type="radio" name="radio_2" value="c">
</div>
$('#radio_1 > input').on('change', function() {
$('#radio_2 > input').removeAttr('disabled'); // 削除
var value = $(this).val();
console.log(value);
if ( value === '2' ) {
$('#radio_2 > input[value="b"]').attr('disabled', 'disabled')
}
});
radio_1 が2 なら、radio_2 のb を、disabled にする。
value を使うのなら、radio_1, radio_2 の対応表がいる
1 - a
2 - b
3 - c nth-childやeq使ったり、data属性でグループ化したらいいんじゃにの Javascriptでは例えばこうしています。onChangeで呼び出し。
function hoge() {
var kibo1 = document.getElementsByClassName("kibo01");
var kibo2 = document.getElementsByClassName("kibo02");
//初期化
for (var k = 0; k < objA.length; k++) {
kibo1[k].disabled = false;
kibo2[k].disabled = false;
}
//クラスkibo01がチェック済
var idx;
var flg = false;
for (var i = 0; i < kibo1.length; i++) {
if (kibo1[i].checked) {
idx = i;
flg = true;
break;
}
}
if (flg) {
kibo2[idx].disabled = true;
}
//以下、クラスkibo02の場合が続く
} 連投すみません。
>>253
つたない説明で申し訳ない。
nameが日本語で、文字コードはShift-JISなのですが、動きますか？
さくっと書いたものでは動作しませんでした。
他の書いた部分が違ったのかもしれませんけれど。 >>254
コードをありがとう。value値で引っ張るのですね。日本語通るか試してみます。
※ただ、選択肢が増えたり変更した場合にJavascriptを書き換えないといけないのと
正直、例えば20位の選択肢の第３希望までを、ifなりswitchなりで分岐するのはいかがなものかと。
>>255
正しくないのですが、（さくっと書いたら動かなかった）
var i = $(".kibo01:checkd).index();//そもそもindex()が正しいのかわからない
$(".kibo02:eq(+i+)").attr("disabled", true);
とかしたいのです。
どのように書いたらいいんでしょうか。
nth-childやdata属性は使ったことがないので調べてみます。
みなさん、ありがとう。 文字コードは、BOM なしUTF-8 以外は、使わないように
プログラミングの基本は、半角文字だけ。
全角文字などは、テキスト部分だけに使うように
HTML, jQueryの基礎から勉強して、わからない事は検索するように
素のJavaScript で、プログラミングしないように
>256 のようなループ処理を読むのが面倒だから
選択肢の数が変動するなら、汎用的に作らないといけないから、
簡単にプログラミングできない
>254 のような、radio_1 と、radio_2 の対応表が必要 >>259
酔っ払ってる？
気を悪くしたら申し訳ないのですが、
たぶん私の方が貴方より諸々理解していると思います。
回答しようとしてくれる気持ちはありがたいです。本当に。
土日は所用があり試せていませんが、ちょっと思いついたこともあります。
また試してみたく思います。ありがとうございました。 Jqueryのajaxで他のhtmlファイルを読み込んでそいつをgetElementByIdとかで
DOM操作してやりたいのですがやり方が分かりません。
XMLHttpRequestでゴリゴリ行くならばresponseTypeにdocumentを指定してやれば
responseXMLをそのまま使えるのですがJqueryではどうすればいいでしょうか？ $.ajax({
type: "POST",
url: "/hoehoe.php" ,
data: {
key: "ほえほえ"
},
dataType: "html",
timeout: 10000
}).done(function(html) {
console.log($(html)[0].getElementById('xxx'))
});
});
普通に考えてこんな感じでやってみたりしてるんですが上手く行かず
末端の方だと$(html).find("#xxx")で取れなくもないのですが
ルートの上の方で子要素が沢山ある場合失敗するような感じ 自己レス、分かりました。
findで絞る場合、body直下のタグはダメなんですね。 >>264
HTML入門とかいう本を読んだほうが良い と思ったけどもbody直下以外にも取得できなかったりしてダメだな。何が悪いんだろう。 他のHTML ファイルを読み込むって、他のドメインからは、
Cross-Origin Resource Sharing (CORS) で読み込めないだろ
例えば、自分のwebページから、
5ch のHTML を、iframe 内に読み込んでも、
他のドメインのwebページだから、アクセスできない
だから、ブラウザから直接では、アクセスできないので、
自分のPC に、webサーバーを立てて、そこ経由でアクセスしないといけない
Ruby の標準サーバー、WEBrick とかを立てる >>263
・htmlを画面表示していますか？
表示しないと（console表示だけだと)documentの関数は使えないと思います。
・表示したのであれば、単純に("#xxx")で取得できると思います。
あえてgetElementByIdを使う理由があるのでしょうか。 ごめんなさい。
ここでいうhtmlというのは"hoehoe.php"で作られるファイルのことです。 >>266
更に自己レス、単純にpostで得られるドキュメントがエラー吐いてて
想定の形式じゃなかったからこっちもエラー吐いてただけの模様。
寝ないで作業するととこんな単純なことも見逃す脳みそになってしまうという言い訳。
ただ、それだけじゃ説明できないことも有るような気が戦でもないけどとりあえずちゃんと動いてるので検証はしない。
多分気のせい。そうに違いない（願望
>>270
あえて使わない理由は特に無いですが
普段jqueryは使わないのとgetElement系も自前でワッパー定義してて
実際は$i("id")とかでもっと短く書けてるのでこっちのが便利なんです >>272
解決おめでとうございます。お疲れ様です。
アルト、エネーブル、ブーリーンという人は知っていますが
ワッパーは初めてです。 ゥラッパーって必ず小さいウ入れてくる奴はいた。吹き出さないよう必死だった俺。 動的に作った大きめのtableをremoveすると時間がかかるのですが、短時間でremoveする方法はあるでしょうか >>278
普通は時間がかかることはない
時間がかかるのは削除する情報が多い場合
その情報とはイベントハンドラとデータ（data）の二つ
データはおそらく使ってないだろうからイベントハンドラ
つまりデータを作る時セルごとにイベントハンドラをつけるのではなく
テーブルなど上位の要素に一つだけイベントハンドラをつけるようにすれば良い >>278
とりあえず隠して
requestIdleCallback使って少しずつ消していったら？ アドバイスありがとうございます
普通は遅くならないということなので、イベントハンドラを意識して見てみたいと思います 「Jquery もういらない」とサジェストされるんですが、まもなく消える技術なんですか？ 導入の簡単さ、お手軽さは替えがたい。
まだまだ生きるよ。
ごちゃごちゃイキってんのはエンタープライズ用途の意識高い系で個人や小規模サイトにはまったく関係ない。 >>282
サジェストされないし、
消えることもないよ 「不要」とか「いらない」ならまだしも
「もういらない」がサジェストするとかありえないな
そんな言葉で検索したり書いたりしないだろ？
今までに自分が調べた言葉が優先されただけだろ
なお「不要」も「いらない」もサジェストされてない
シークレットウインドウでGoogleでサジェストされたのは以下
・ダウンロード
・使い方
・サンプル
・入門
・最新
・できること
・読み込み
・導入
・javascript
・$ 意味 GIFのローディングアニメを使ってるんですがサーバサイドの処理が終わってブラウザでDOMを作る時にアニメが止まります
止まらないようにする事は出来るでしょうか >>286
requestIdleCallback使って少しずつ作っていったら？ Ajaxで配列を受け取るときの書き方を教えて下さい(3.1.1)
phpで配列をajaxに返して表示したいのですが、
指定箇所Aでdataをdata.dTextと書いても、受け取れません
どう書けばいいですか？
///////index.html///////
$('#ajax').on('click',function(){
$.ajax({
url:'./requestA.php',
type:'GET',
data:{//phpに渡す
'divText':$('#divTextID').text()
}
})
// リクエスト成功時、phpから受け取る
.done( (data) => {
$('.result').html(data);//ココ教えて！！！！！！！！！！！！！！！！！！指定箇所A
})
});
////requestA.php//////
header('Content-type: text/plain; charset= UTF-8');
$rs=array(
"dText" => $_GET['divText']//ココの値が欲しい！！！！！！！！！！！！！！
);
echo json_encode($rs); 自己解決しました
古い書き方ですが受け取れたので一応(1.10.1) jqueryクックブック第2版まだですかね？
初版はもう売ってないようなんですが このゲーム本当に可愛い女の子いっぱいやな
https://goo.gl/ux7Y7F $test1 = $('.navigation li a').each(function() {
var $href = $(this).attr('href');
return $href;
});
こんな風にeachで回してhrefの値だけを取りたいんですが
$hrefには文字列でurlが格納されているのですが、$test1ではオブジェクトで返って来てしまってて<a>タグなど全ての要素が含まれてしまうのですがどのようにすれば良いでしょうか?
$test1[0] = url1の文字列
$test1[1] = url2の文字列
$test1[2] = url3の文字列
としたいです 以下のどちらか
var $links = $('a').map(function() { return this.href; });
var links = $links.get();
もしくは
var links = $.map($('a'), function(a) { return a.href; });
「要素の配列」を同じ数の「別の配列」に変換するときにはmapを使う
前者のjQueryオブジェクトのmapは、一般的にはjQueryオブジェクトを返すためにつかう
この例のように文字列を返すこともできなくはないけど。.get()メソッドで値を取得できる
（.get()メソッドは一般的にはjQueryオブジェクトからDOM要素を取り出すために使う）
後者は「何かの配列」を「別の何かの配列」に変換する。
これはreturnで返したものが単純に戻り値になる >>298
詳しい解説までありがとうございます
mapで'href'の値のみ取得出来るようになりました!!! DOMエレメントにtextメソッドで書き込んだ文字列を
textメソッドで読んだ時は
必ず同じ値になりますか？
なんとなく、変換されてしまう場合もある気がしますが ある要素の子要素をごっそり入れ替えるのに、
emptyメソッドとappendメソッドを使っていますが
一度に済ませる方法ありますか？ >>302
htmlメソッドに文字列以外を渡すという発想がありませんでしたが
appendのようにjqueryオブジェクトやjqueryオブジェクトの配列を渡しても動作するんですね
ありがとうございました 20年前にも聞いたな…
いつまでもおんなじネタで騙され続けるのねｗ jquery初学者の者だが
これ便利ですね
なんですたれてるの？ 別にすたれてない。
みんな知ってるので誰もわざわざ宣伝しないだけ。
長年連れ添った妻のようなもの。
見えないところで陰口を叩いてるだけで誰も本当に別れようとしない。 ここを見る限り年々増え続けたjQueryのシェアがようやく止まったかなってところだしな
https://w3techs.com/technologies/history_overview/javascript_library/all
ウェブ全体の73.3%（JavaScriptライブラリを使用している中では97%）で
しばらくは安定するのだろう。それからいつ減少に転じるかはわからない 連想配列(idやnameなどが入っています)をJSONで渡してjQuery側へ持ってきた値が取り出せなくて困っています
return json.test_data;には正常に連想配列の中身が入っていることを確認したのですが
$testからidなど個別に参照したいのですがどのようにすれば良いのでしょうか?
$testの中身を見るとObjectのresponseJSON配下に欲しい値が入ってるのでこれを取り出したいです
var $test = $.getJSON(
"JSONのURL",
function(json){
return json.test_data;
}
);
console.log($test.responseJSON.test_data[0]); ← undefinedとなってしまう $testは名前が良くないだろ。
$なんとかは、jQueryオブジェクトを入れる時の
（一部で使われてる）命名規則だ で、$testの中にresponseJSONがあるわけないだろ
たぶんtest_dataもないだろ
ちゃんと$testの中表示してみてみろ $ で始まる変数名は、付けられない
または、使わない $.getJSONは非同期処理なんだからコールバック内か$test.doneで処理しろ
$.getJSONして終了待たずにconsole.logしたらjson取ってくる前にconsole.logされちゃうでしょ 皆さん、ありがとうございます
JSONを扱う処理は$.getJSON内に処理を書くのが普通なのですね
$.getJSONはJSONで渡した値を取得するだけで、取得した後に処理を書くものだと思っていましたw
変数名の$についても分かりました 初心者です
質問よろしいでしょうか
WPでブログ記事に画像ギャラリーを組み込むページを作りたいと考えております
http://www.klutche.org/demo/change_pic/
上記のサンプルを参考に組み込み、単一記事は問題ないのですが
複数記事を同時表示している場合、全てのギャラリーが切り替わってしまいます
http://w3q.jp/t/1498
質問内容としては下記の方とほぼ同じなのですが、解決しませんでした とりあえず
$ChangePhoto ="ChangePhoto" .$Cnt;
$Cnt = $Cnr +1;
みたいな感じで変数を作って、
JSはChangePhoto1 ChangePhoto2…のコーディングを作って解決しました。美しくないですよね… クリックされたimg.ChangePhotoから、変更すべきメインの画像を取得できればいいわけだから、
例えば
$(this).closest("ul").prev("p").children("img")
でもいいし、メインの画像にclass="main"を設定して、
$(this).closest("div.wrap").find("img.main")
でもいいだろうし、何通りもやり方はあるだろう
どれが効率的なのかは知らない jQueryもreactみたくコンパイル機能ないの？
node.jsでビルドすれはjQuery.js読まずに単体で動きますといえば格好良くなるのに >>319
Domを全部jqueryで生成してるならありかもな
そうでなければコンパイルとか意味なくね？ 質問する方も答える方も間違ってるとか…自演か？
reactにコンパイル機能なんてねーよ
エスパーするとcreate-react-appでデフォで設定されてるbabelによるトランスパイル+webpackによるバンドリングのこと言ってるんだと思うが、webpack自体はふつうにjqueryもバンドルできるしｗ
なに言ってんだかｗｗｗｗｗ お世話りなります
index.html内のヘッダーやサブメニューなど、他のページでも同じ内容を表示する部分を
jQueryのload関数で共通化してみたのですが、
例えばヘッダーの箇所をheader.htmlとして新しいファイルにした場合
header内容のcssやjsの適応はどうすれば良いでしょうか？
試しにheader.htmlの中に!DOCTYPE htmlから始まめsrcやlinkも付け加えて、
そこに関連付けたheader.cssファイルに色々なセレクタを加えたのですが、
index.htmlで表示されるheader部分が、
header.cssのセレクタではなく、index.cssの方のセレクタが優先されてしまいます
これはそういうものなのでしょうか？（もし私の記入ミスでなけえば）
宜しくお願い致します CSS の優先度のルールがあって、優先度の高い方が上書きする。
検索して調べてみて
上書きされるのが嫌なら、
index.html, header.html に個別のクラスをつけて、それらで指定すれば？
例えば、.index, .header を付けて、
p は黒色、p .index は赤色、p .header は青色とか
Rails とか、各フレームワークには、もっと良いやり方があるかも知れないけど >>323
レスありがとうございます
323さんのおっしゃる通りに
header.htmlのタグにクラスを付けたのを、index.cssに加えたら無事変化しました。
できれば
index.htmlにはindex.css
header.htmlにはheader.css で分けて管理したいのですが、できないでしょうか？
header.html内のタグにクラスを付けたのを、header.cssに記入して、
それらをindex.htmlで表示してみたのですが変化が起きていませんでした。 HTMLの断片をjQuery含めたJavaScriptで読み込んだりはしません
そんな愚かなことはしません >323 を修正
index.html, header.html の<body>に、個別のクラスを付けた方が簡単かな
例えば、.index, .header を付けて、
p は黒色、body.index p は赤色、body.header p は青色とか
それか、CSS に、! を付ければ、最優先される機能もある
>>324
CSS の優先度のルールがあって、優先度の高い方が上書きする。
この優先度は、かなり難しいから説明できない。
自分で、検索して調べてみて
index.css, header.css の読み込みの順番も、優先度に関係あるのかも。
後から読み込んだものが優先されるのか？
よく知らないけど
基本的には、優先度を理解して使い分けるのは、かなり難しいから、
優先度で変わるのは避けるべき。
保守できなくなる
異なるデザインには、異なるクラスを指定すべき。
これが大原則！ 静的HTMLのためのテンプレートエンジン
第1回 共通部分が多いHTML
https://app.codegrid.net/entry/template-for-coding-1
「html 分割 ファイル」で検索！
jQuery で、HTMLの断片を読み込んで、ページを作ったりはしないかな。
jQuery Mobile のようなフレームワークはあるけど
jQuery は、ユーザーのクリックなど、
イベントに応じて、ページを変化させるものが主要
フレームワークなら、Vue.js が最も易しいかも Ajaxでできなくはないけどね
レギュレーションでCMS入れられない、サーバーサイドインクルードも使えない会社とかたまにあって、ソース見たらJSでヘッダやフッターがインクルードされてたってことがあったな
見た目に影響及ぼしがちだから自分ではあまりやりたくないけど 5ch は、空のHTML を送ってきて、Ajax で、すべての内容を読み込んでいる
だから、内容がしばらく表示されないことがある >>329
無事、CSSもちゃんと読み込めるようになりました！
ＣＳＳの基本的な部分が抜けていました・・・
一からやり直します
丁寧に教えて頂きありがとうございました！ ヘッダーやフッターをインクルードしたい時って
普通だとどうしてるの？ Dwテンプレ
Pugインクルード
ーーーーー静的管理の壁ーーーー
JSインクルード
ーーーーーフロントの壁ーーーー
SSIインクルード
PHPインクルード
CMSテンプレート化 >>336-337
Rails などのフレームワークだろ また雑魚rubyキチガイか(呆
ま、仕返しにrubyスレ荒らしとくわ。
railsのテンプレートエンジンはerbやslim、haml選択してそれ使うだけだろうが笑
nodeのテンプレートエンジンのejs、pug、handlebarsも同じじゃザーコｗ
どの言語にもあんだよ身の程知らずｗｗ
おっと先輩面すんじゃねーぞこういうのの元はphpだからなｗｗｗｗ 俺はいつもluckerを目の敵にしているということ
どこにいてもluckerを思い出す 「$.getJSONで二つのJSONファイルを読み終わったらこの処理をする」
っていうのはどう書けばいいですか？ >>345
https://api.jquery.com/jquery.when/
> $.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) )
> .then( myFunc, myFailure );
https://www.tam-tam.co.jp/tipsnote/javascript/post5807.html
> 「複数の非同期処理が全部終わったら、続く処理を行う」というのがすっきり書けます。
>
> $.when(
> $.getJSON('a.json'),
> $.getJSON('b.json')
> )
> .done(function(data_a, data_b) {
> // すべて成功した時の処理
> console.log(data_a, data_b);
> })
> .fail(function() {
> // エラーがあった時
> console.log('error');
> }); ■ このスレッドは過去ログ倉庫に格納されています
