Q&A
ajaxをはさむ必要があるのでしょうか。
以下のようにajaxで、1-100%の細かい可変値を受け取り、main.phpのheadに<style>タグを
挿入することを検討しているのですが、そもそもこのような考え方が適切なのかをアドバイスをいただければと思い
投稿させていただきました。
なお、初めからcssを準備しておきそれに応じたaddClassを処理することも考えたのですが、
1-100%が細かい可変値のため、これを採用しませんでした。
ポイントは以下の点です。
・$ajaxでcssの可変値を受け取ろうとしている。
・可変値は無数にある
・実際には受け取った値をRDBに格納し、また他の値をRDBからも取得して加工した数値を、非同期通信し、出力しますが、その部分は本旨から逸れるため、本件から割愛しています。
・出力する.barは複数の要素が変更されることも想定しています。
問題点や、よりよい方法等のアドバイスをいただければ嬉しいです。
よろしくお願い申し上げます。
php
1//receive.php 2$ratio=$_POST['hoge'];//0%-100% 3echo "<style>.bar{width:$ratio}</style>";
html
1main.php// 2<head></head> 3<body> 4 <div class="bar">ratio bar<div> 5 <div class="bar">ratio bar2<div><!--複数要素に適用されるかも--> 6</body>
javascript
1$.ajax({ 2 type:'POST', 3 url:'receive.php', 4 timeout:1000, 5 data:{ 6 //省略 7 }, 8success: function(text){ 9 $('body').append(text); 10 } 11);
コメント有難うございます。はい、実際にはPOSTの内容をサーバーに格納するとともに、サーバーから取得した数値も利用して＄ratioを計算して非同期通信で結果を出力します
.barの付いた要素が1つだけもしくは複数あっても全部同じスタイルを付与することになりますか？もしくは複数のスタイルを変える必要があるのでしょうか。
コメントありがとうございます。一つの要素を想定してご質問したつもりでしたが、可能性を踏まえると複数要素に適用すべき前提で想定することが適切と考えます、ご指摘ありがとうございます。
この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文を編集することをお勧めします。
コメントありがとうございます、本文に加筆修正させていただきました。
回答1件
0
ベストアンサー
PHPから値を受け取って、jsで
$('.bar').css('width',値);
ではダメでしょうか？
投稿2018/09/03 02:00
総合スコア665
コメント有難うございます。
cssを調整するのではなく、JS側からcssを操作するということですね。こちらでも実行することをかくにんできました。
もしよければ
1) cssではなくjs側で調整する利点
2) 複雑なcssを定義する場合に、本件のような取扱いを推奨するか否かについて
のご意見を頂けますでしょうか。
予め、お詫びをもうしあげますが、私がまだまだcssに不案内で、これは良くてこれはだめでということではなく、実務で皆様であればどのように対応されるのかを是非聞いてみたいという純粋な気持ちでお尋ねした次第でございます。
宜しくお願い申し上げます。
実装したいものや目的によります。
今回は「進捗バーの長さを動的に表現したい」
というような案件にお見受けしましたので、
script側で動的にcssを変更するのは自然でよく見る実装だと思います。
headタグ内で定義するのは、スタイルを静的に定義したい場合でしょう。
例えば、80%で止めた状態のhtmlとcssを静的に保存したいとか。
コメントをいただきありがとうございます。
大変参考になりました、動的か静的かという視点で一つの目安にしてみようと思います。
ご助言を聞けてよかったです。よろしくお願い致します。
あなたの回答
tips
プレビュー
