+ 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/ >>773
やっぱりbodyの最後が一番ですよね
headから出っるのが気持ち悪いですが、我慢します
今後はjqueryなども全てbodyの終了直前に書くようにします
ありがとうございました >>779
うおおお！ありがとうございます！完璧です！
感謝！ <button type="submit" disabled>
本当は、ボタンも消すと言うよりも、
disabled で有効・無効を切り替えたいだけじゃないの？
ボタンが消えるというのは、奇妙な振る舞い
jQueryでフォームのボタンを有効・無効にする
https://uxmilk.jp/40456 ユーザーサポート歴の長い俺から言わせてもらうと
「一度きちんとボタンが押されたから二度押し防止のためにボタンが無効化されてるんだ」
なんて理解できる一般人はよっぽど精通した人だけ
反応がないとあちこち触って投稿中に別のページに遷移したりする人もいる
だからアニメーション画像と共に投稿中であることを表示して
時間がかかっているようなら更にその旨を表示する
完了するまで触るなと表示する
そのくらいはしないと一般人相手には厳しい jQuery UI のモーダル画面のようなものが出て、
ボタンを押したら「押しました」と確認画面が出るようなものが、
うっとおしいけど、わかりやすいのかも jQueryのバージョンは幾つにしていますか？
wordpressは1.12なのですが、これを使えば良いのでしょうか そんなの自分で決めれよ
なんで他人に決めてもらわなきゃ何もできないんだ？ >>786
何をイカってるんだ？
失敗談や地雷バージョンを聞いて避ける事が出来るなら、
それに越したことはないだろう
>>785
それで動くならそれで良い
wordpressなら差分のmigrateも入るからバージョンによる差異は起こりにくい
コードを書く時はno.conflictを外さずに
jQuery(function($){ 〜
に書くこと
もし何かプラグインやライブラリが動かないならjQuery3.x入れれば良い >>787
ありがとうございます！
migrateって？なんですか！？
下のコードもよくわからないのでもっと詳しく教えてください >>788
＞migrate
jQuery1.xと3.xの差を埋める差分
＞下のコード
そのままだと$が使えない
・WordPress標準のjQueryを使う場合の書き方
http://primarytext.jp/blog/1298
$()使わずにjQuery()使うならキにしなくてもいいけどね >>789
差ってどんな差がありますか？
2.xじゃだめでしょうか？
あとリンクありがたいのですが難しいのでもっと初心者にわかりやすいリンクくれると助かります… >>790
1→3は色々と軽量化、追加・削除された関数等がある
https://qiita.com/fmy/items/345a264a1cf2e2a73f62
1+migrateで3相応の機能になる
2は忘れた。無条件に使わなくて良いバージョンという認識しかない
知りたければ「jquery バージョン 差異」辺りで検索
＞あとリンクありがたいのですが難しいのでもっと初心者にわかりやすいリンク
「wordpress jquery $ is not a function」
で検索してくれ 2.x系は最新ブラウザだけに対応すれば良い場合に
古いブラウザの対応を切り捨てたものとして作られたが
結局需要がなくて3.x系で一本化された >>791
> 1+migrateで3相応の機能になる
逆、3+migrateで、1との互換性が完璧になる
基本的に1系と3系には高い互換性があるが、3は1の時代では必要だったが
今は不要な機能などが削除されてたり機能強化に伴う仕様変更などがある
そういったものを復活させるもの
3系に置き換えて動かなくなったものがあればmigrateを使用して
古いコードを置き換えていくことで、3系に完全対応させる >>793
スマン、完全に間違ってた
ずーっと間違ってたわ・・・ migrate入れてるけどなんか動かないなぁ、まぁ互換性100%ってわけでもないしって諦めてた
オワタ 普通に使うなら3でいいのかな？
ajax使わないならその部分削除するとすっごい軽くなると聞いたけど名前が思い出せない
vueと合わせて使ってみたい 3でいいよ
ライブラリ複数入れるのはオススメしない。何かあったら超ハマるぞ vueとかサイト全体をJavaScriptフレームワークに
置き換えるのが前提のものを使うのは大変すぎるだけ バックエンドフレームワークとフロントエンドフレームワークの二重管理になるから
中規模以上のサイトになると両方メンテしないといけなくなる
何か新たにデータを取得して表示させるだけなのに、バックエンドとフロントエンド両方対応しないといけない
しかも整合性合うように
バックエンドでデータは更新されているのにフロントエンドで保持しているデータが更新されていませんでしたとかよくある Vue.js, Nuxt.js では、axios, Lodash を使う bodyではなく何かoverflow-y:scrollがかかっているブロックの中で、目的の要素を頭出ししたいのですが
<article style="overflow-y:scroll height:500px;">
<section style="height: 300px;"></section>
<section style="height: 300px;"></section>
<section style="height: 300px;"></section>
<section style="height: 300px;"></section>
<section style="height: 300px;"></section>
</article>
const $section = $('article').children().eq(3);
const top = $section.offset().top;
$('article').scrollTop( top );
ではどうもズレるようです
というかブロックの中身がいくつであってもtopの値が変わらないですね
こういう場合、何を使えばいいのでしょうか
$section.prevAll().each()で.outerHeight(true)を合計するくらいしか思い浮かばないですが… $section.get(0).scrollIntoView(true)でいけました
こんなのあったんだ… 実験的な機能らしいけど
>>803
マジですか？ クリックする度に、HTMLの要素(DIVでもよい)のdisplayをオン･オフ切り替える関数ってどうすれば良いんですか？ $(function() {
$('.switch').click(function(e) {
$('.popup').show();
});
});
だと、クリックしたら1度表示されてそれっきりじゃないですか。
もう1度クリックしたら非表示、
そこから更にクリックしたら表示
ってしたいのですが html
<div id="chinko">うんこ<div>
<button id="chikubi" type="button">まんこ</button>
css
.minaide {display: none;}
js
function hadakaodori() {
$('#chinko').toggleClass('minaide');
}
$('#chikubi').on('click', hadakaodori); >>808
非表示のものをどうやってクリックするんだ 再質問ですが、
そのクリックで表示･非表示の切り替えをして、同時にマウスホバーでも表示･非表示をやり、
それらが矛盾無く正しく動作するような関数ってどう作ればよいでしょうか？ 私は、ホバーのケースはCSSで、クリックのケースはJSでと分けてしまったせいか、おかしな動きになってしまいます 状態(共有)変数が必要で、それを通して更新する
クリック → 変数 ← ホバー 共有変数として、
$('.switch').checked = false;
こんな感じにしてやろうとしたんですが、上手く行きませんね
.switch っていうのは、オンオフを切り替えるスイッチ役の要素(クラス)です
ウェブページを開いた直後はページ内の全てのスイッチ役の要素はスイッチオフなのでfalseを設定してます。 $(function(){
$('.switch').checked = false;
$('.switch').click(function(e){
if($(this).checked = !$(this).checked){
$(this).next('.popup').css({'display':'inline'});
}else{
$(this).next('.popup').css({'display':'none'});
}
});
$('.switch').hover(function(e){
$(this).next('.popup').css({'display':'inline'});
},function(e){
if(!$(this).checked){
$(this).next('.popup').css({'display':'none'});
}
})
}); >>818
propを使う
https://qiita.com/i47_rozary/items/db77352cc0af8d05d39a
あとjQueryだと
$('.switch').checked = false;
ではなく
$('.switch').checked(false;)
という書き方が多いよ。どっちも動かないけどね JavaScriptでは
オブジェクト.プロパティ = 値;
っていう書き方出来てたのにJqueryでは無理なんですね jQueryもJavaScriptなんだから、
JavaScriptで出来ることはjQueryを使っていても出来るよ こうすれば上手く出来ました
$(function(){
$('.switch').each(function(){
$(this).prop('checked', false);
});
$('.switch').click(function(e){
if($(this).prop('checked',!$(this).prop('checked'))){
$(this).next('.popup').css({'display':'inline'});
}else{
$(this).next('.popup').css({'display':'none'});
}
});
$('.switch').hover(function(e){
$(this).next('.popup').css({'display':'inline'});
},function(e){
if(!$(this).prop('checked')){
$(this).next('.popup').css({'display':'none'});
}
})
});
ありがとうございました サンプルコードをどうぞ
https://codepen.io/infologicmation/pen/yGVzdw
クリックによる表示･非表示切り替え
と
ホバー･アウトによる表示･非表示の切り替え
が矛盾無く共存できています >>824
span要素にcheckedプロパティは存在しないのでpropは使ってはいけない >>824
cssメソッドではなくclassを設定するようにしましょう >>824
hoverはCSSを使用するようにしましょう 模範解答例
https://jsfiddle.net/w6bm0fn5/
[JavaScript]
$(document).on('click', '.switch', function() {
$(this).toggleClass('checked');
});
[css]
.popup {
display: none;
}
.switch.checked + .popup {
display: inline;
}
.switch:hover + .popup {
display: inline;
}
HTMLは>>824から変更なし
jQueryは最小限のJavaScriptで実現できる = HTML+CSSにメインの処理を任せることで高速に実行できるのです。 >>828
凄いです。綺麗です
ありがとうございました。 クラス名に「checked」という名前つけるのは避けるな俺なら JavaScriptはなくても出来る
https://jsfiddle.net/ry9Lhpz7/
>>830
微妙なところだね。本質的にはcheckboxと同じだからねぇ Vue.js などの、リアクティブ・プログラミングだろ 今って即時関数に閉じ込めないんですか？
(function() {
//処理
})(); なぜ、何を閉じ込めたかったのか？
それはvar変数のスコープが関数スコープだったため、var変数のスコープを閉じ込めたかったのだ。グローバルと各ブロックで変数名が衝突しないように。
ブロックスコープなletとconstがある今、それは（大抵の場合）不要。 >>834
それです。
const baz=()=>{
let foo=1;
console.log(foo);
}
ダメですか node.js用でないただのローカルhtml＋jsファイルから
node.js用のjsを呼び出して（起動させて）返り値を得る…みたいなことってできないですかね
現時点ではわざわざコマンドプロンプトから「node ○○.js」ってやってテキストファイルを生成させて
そのテキストファイルを開いてコピーしてhtmlのテキストエリアに貼り付けってやってるんですが
これを省略したくて…
（html内だけで完結できないのは、生成するデータの取得にnode.jsの認証用プラグインを使ってるため）
htmlファイル自体がちゃんとfile:///でなくnode.jsによるサーバー（localhost）を通ってないとダメなんでしょうか ポン刀持ってヤクザ事務所に斬り込めば返り血を得ることができるよ >>839
Nodeを起動させっぱなしで
WebSocketとかで通信するのはだめなんか？ VSCode の拡張機能、Code Runner とか、Ctrl+Shift+P のRun Code みたいな、
簡単に、Node.js で実行する拡張機能はないの？ >>841
大人しくそうするのが一番手っ取り早いんでしょうかね…
Nodeを起動させるバッチファイルを書いてスタートアップに登録しておけば起動は問題なし…？
一応Node.jsの触り（ビギナーズブック https://www.nodebeginner.org/index-jp.html）
はやったことあるはずですが、それでも現状からの移行を問題なくすんなり迅速にできるか不安なので
もし他に方法があればと思い聞いてみました バッチファイルをクリックしたら、
HTML出力するコマンド実行して、ブラウザで開くような
バッチファイル作ればいいだけじゃん >>844
あー…？
いえ、>>839にも書きましたが
基本的にはhtmlを使って作業していて、文字列を取得したいときにnode.jsを起動してテキストエリアに貼り付けてそれをhtml側でパースして…ってやってるので
都度htmlを生成するとなると…
とはいえテキストエリアに初期値を設定したいだけのときはそれでも良さそうですね 普通にwebpackとかでつなげりゃいいだけでしょ >>846
node.jsと行ったり来たりする手間は省けてないような…？
>>848
webpackってファイル数をまとめるやつでしたっけ
こういうことにも使えるんですか
>>847
単なるローカルhtmlファイルではやりづらいことも、html由来のデスクトップアプリなら色々できるようになりそうだとは薄々思ってましたが
どうやればいいのかいまいちわからずにいたところでした
まだ少ししか調べられていませんがElectron良さそうですね
TW.jsというのもあるようで… ABCいずれかのクラスを持っている
かつ
DEFいずれかのクラスを持っている
みたいなorとand混合の条件絞り込みってできますか？ $('.A, .B, .C').filter('.D, .E. .F') VSCode Amazing Plugin - Quokkajs rapid prototyping playground.
https://youtu.be/klLP8EeTKtc
VSCode の拡張機能の、Quokka.js は？
Node.js で実行したものを、リアルタイムで、端末とエディタ内の両方に表示する
let numbers = [ 1, 2, 3 ]
let doubled = numbers.map( n => n * 2 )
doubled
//=> [ 2, 4, 6 ]
でも、エディタ内の結果からは、コピペできない！
端末からコピペするしかない chromeのコンソールもおんなじことしてくれるのであまり感動しなかった… >>851
どうもありがとうございます
期待通りのものが作れました >>843
個人的なことならブラウザ拡張で済ますって方法もあるよ
どうせNodeも外部通信くらいにしか使ってないんじゃないの？ >>852
は、ブラウザではなく、Node.js で実行している
このQuokka.js の無料版は、既に存在するファイルから、実行できない。
新規ファイルでしか実行できない selectboxの各optionの文字色を変えるにはどうしたらいいでしょうか？
背景＝$('option').eq(n).css('backgroundColor', c);はできますが
文字＝$('option').eq(n).css('color', c);は変わりません
Opera、Chromeで確認してます（foxは共にできず）
addClass使えはなしでお願いします（これでもできませんが） 補足
cは#000000の形式で
文字色を変えるは動的にです >>857
iphoneドラムロールになるし、あれは背景を変えられない
ブラウザを絞ればもう少し対応策があるかもしれない
ただ、諦めたほうが良いとは思う >>859
iphoneや泥は捨てでいいです
動作せずは困りますが色なしは可です
PCのWinで機能すればいいです いや、捨てでいいですって切り分けることが不可能でしょ
もし白黒の電子ペーパー端末で見たり色弱者が見た場合のこととか考えてる？ >>857
selectとoptionにスタイルかけるのは無理だから諦めろ
どうしてもやりたいなら代替要素でselectっぽい物を描画するライブラリを使えばいい
このスレ的に言えばjQueryUIでも使えばいいんじゃないか？ >>864
これな〜
モバイルだと画面の下の方でそれクリックすると下にはみ出して操作性悪いんだよな
あまりオススメできない
モバイルのデフォルト機能に任せた方が、個人的には良いと思う まあモバイル捨てていいらしいからいいんでない？
なんならモバイルで見たら普通のselectで出しわけしてもいいし 色弱に配慮する必要あるか？
そんなん言ったら全盲の人にも配慮しろってなって際限無いじゃん 俺は一応配慮してるわ
Lighthouseで指摘されたとこパパっと直してハイ終わり！
属性付けるだけで、2,3時間で全部終わった
まぁこれぐらいならやっといて損はないかなと 色弱ってFirefoxのシェアと同じくらいには居るんだから無視できないでしょ Firefoxは基本Chromeサポートのついででサポートできるからするけど
そうじゃなかったらChrome以外切り捨ててるな俺だったら >>861
そのためにかつ健常者でも見やすくするために色を変えるのです
>>863
背景は通常にできるのにテキストはできず、別の仕組みなのですね
簡単にできると安易に考えてましたがあきらめます
ありがとう
ちなみに>>862は別人 >>861
ちなFirefoxは勝手に切り分けられます >>875
ややこしくなるから次質問する時はIDトリップ付けたほうがいいかも >>877
IDトリップ？検索してみます
忠告ありがとう >>857
ChromeでもFirefoxでも文字も背景も色変わるけどなぁ ■ このスレッドは過去ログ倉庫に格納されています
