+ 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/ 動的に作った大きめの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');
> }); >>346
こういうのがあったんですね
ありがとうございます はぁ？お前いっぺんコンクリ抱かして大阪湾沈めたろか？ な！？なぜ沈まない？？？
いや、それどころか？浮いてないか！？
そんな、まさか
？？？「舞空術ってやつさ」 ここ初めてなんだが質問してみるよ
canvasを使ったちょっとしたアニメをhtmlページの背景にしたんだが他のクリックイベントでリセットされちゃうの防止したいんだが preventDefault(), stopPropagation() とか？
「js prevent propagation」で検索！ テキストボックスなどでselect()メソッド使うと選択状態になりますが
テキストボックスなどやjQ以外のライブラリ使わず
<p>
<span>いぬが、ほえる</span>／
<span>ねこ なく</span>／
<span>うま はしる</span>／
</p>
のspan間クリックまたはＷクリックで、「ねこ なく」全て選択状態に
実現する方法あったら教えてください
（通常WindowsでＷクリックだと「ねこ 」だけ、または「なく」だけが選択）
通常のUIと異なりますがあえてです >>385
https://jsfiddle.net/you84snf/
$('span').click(function() {
var range = document.createRange();
range.selectNodeContents(this);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}); >>354
ドンピシャでした！ありがとうございます 横からだけど、恥ずかしながらrange形始めて知った…
まだまだ勉強しないとダメだな 形も系もそんなものは存在しない。
独自用語使うな。馬鹿だぞ。 javascriptの「『.classList.add』 と 『.className』の違いについて教えてください。
要素にクラスが無い場合に新規で追加するのが.classNameで
すでにあるクラスを変更するのが.classList.addという認識でよろしいのでしょうか？ classListはリスト、classNameはスペース区切りの文字列で格納される違い
自分の好きな方を使えばいい
クラスが無い状態からclassList.addでも全く問題ない >>359
古い時代、IE2.0やネスケ3.0の時代にはクラスには一つの
値しかいれることができなかった。<a class="foo"> みたいに。
これがスペースを区切って複数入れられるようになった
<a class="foo bar baz"> みたいに。
クラスの値が1個だけの時代であれば操作は簡単だった
classNameに値を入れることぐらいしかできないのだから
だけどスペースで区切って複数入れられるようになってからは、foo bar bazのうち
barだけを消したいとか、さらに一個付け加えたいとか、複雑な操作が必要になった。
それに早くから対応したのがjQuery。addClassやremoveClassといった、
複数の値を操作するメソッドが作られた。それが2006年
それから4年後の2010年にChromeとFirefoxでclassListが部分的に実装され
2013年にChromeとFirefoxとSafariでjQuery相当の機能が実装された
IEは2012年に部分的な実装で終わり、Edgeで完全版が実装された。 >>360
>>361
ありがとうございます。
複数のクラスへの対応ということなんですね。勉強になりました。 jQuery を 2 から 3 にバージョンアップしたら
$('...').load() ってとこでエラーが出るようになったんだけど
引数なしの load って何をしてるんですか？
要素が load されたときに引数の関数を実行するみたいなメソッドみたいなんですが
引数なしで何か意味があるんでしょうか
コーディングした人のミスなのかな… たぶんloadイベントを発生させる
http://api.jquery.com/load/
のNoteに3.0から変わったことが書いてある ありがとうございます
ということは消すのはまずいんですよね
jQuery3 にしたときに影響を与えないようにおきかえるべき適切な関数ってありますか？ ごめんなさい
むこうでまともな回答がもらえなかったので ヘルプなんてあったんですね
知らなかった…
規約じゃなければこんなのあってもわからない気がするんだけど
とりあえずこちらでの質問は〆ます
マルチすいませんでした なんでマルチポストしたら駄目なんだろうね
投稿された質問にteratailの著作権が発生するとでもいうんだろうか >>370
> とりあえずこちらでの質問は〆ます
なぜ、ヘルプに書いてある通りにしないのだろうか
「やむを得ず複数のサイトに質問を投稿された場合は、質問内容にマルチポストをする理由を書き、他のサイトの投稿へのリンクを貼ってください。また、解決した際には必ずteratail及びすべての投稿に解決した旨と、どのように解決したかを記載してください。」 5chの印象なんて便所の落書きって思ってる人もいるしリンクなんてはりたくないだろ そもそもヘルプって絶対目を通すべきものでもないし義務でも何でもない
2ch内のマルチもマナーの問題で気にする人から単に回答がもらえないだけ teratailはアカウント必須だからこういう変な粘着があるとめんどくせえ
stackoverflowのほうがいいぞ >>374
自業自得だろ
回答者だって他所で回答されている内容を重複回答したくないだろうに ■ このスレッドは過去ログ倉庫に格納されています
