質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1105閲覧

非同期通信 scss

yakumo02

総合スコア103

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/12/12 12:51

非同期通信でチャットアプリを作っています
メッセージを吹き出しで囲っています
イメージ説明

画像も投稿できるのですが、画像のみで投稿すると
イメージ説明
メッセージを入力していないのに吹き出しが出てしまいます
リロードすると吹き出しは消えます

画像のみの投稿の時は吹き出しを表示しないようにしたいです
宜しくお願いします

仮説、検証作業は 調べるとcss :not()があるみたいで、それを使おうと思ったのですが、よくわからなかったです
宜しくお願いします

吹き出し scss

.message { margin-top: 60px; &__text { position: relative; border-radius: 10px; display: inline-block; margin: 1.5em 0; padding: 7px 10px; min-width: 120px; max-width: 100%; color: #555; font-size: 16px; background: #f3f6f6; &:before { content: ""; position: absolute; top: -30px; left: 20%; margin-left: -15px; border: 15px solid transparent; border-bottom: 15px solid #f3f6f6; } } }

非同期通信 js

$(document).on('turbolinks:load',function(){ function buildHTML(message){ var img = message.image ? `<img src= ${ message.image }>` : ""; var html = `<div class="message" data-id="${message.id}" > <div class="message__upper-info"> <p class="face"> <p class="message__upper-info__talker"> ${message.user_name} </p> <p class="message__upper-info__date"> ${message.created_at} </p> </div> <p class="message__text"> ${message.content} <div> </div> ${img} </p> </div>` return html ; } $('#new_message').on('submit', function(e){ e.preventDefault(); var formData = new FormData(this); $('#ajax').removeAttr('data-disable-with'); var url = $(this).attr('action') $('#new_message')[0].reset(); $.ajax({ url: url, type: "POST", data: formData, dataType: 'json', processData: false, contentType: false }) .done(function(data){ var html = buildHTML(data); $('.messages').append(html); $(".messages").animate({scrollTop: $(".messages")[0].scrollHeight}); }) .fail(function(){ alert('エラーが発生しています'); }) });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

:empty という疑似クラスがありますが、Selectors Level 3 では空白文字を許さないので適用されません。
Selectors Level 4 で許すように変更になっていますが対応したブラウザはないようです。
https://developer.mozilla.org/ja/docs/Web/CSS/:empty

したがって CSS ではなく スクリプト側 (buildHTML) で message.content の有無を判定するのがよさそうです。

投稿2019/12/13 02:49

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yakumo02

2019/12/13 06:21 編集

回答ありがとうございます scssの条件分岐とかは使えないんですか? 吹き出しとテキストのクラスはmessage__textなのですが、message__textが存在しない場合はscssを適用しないなど
x_x

2019/12/13 06:25

.message__text は 常に存在していますよね? 存在しないようにするために buildHTML を変えるということです。
yakumo02

2019/12/13 06:50

すみません、調べたのですが判定の仕方がわかりませんでした ${ message.content == null ? まで記述しましたがこの先が分かりませんし、このやり方があっているのかも不安です 全然違うかもしれませんが、has classについても調べてみました https://www.sejuku.net/blog/54940
yakumo02

2019/12/14 01:42 編集

ありがとうございました
x_x

2019/12/13 08:31

うーん、これですかね? https://qiita.com/kumasuke/items/36365bcdf30eaea65250 変数 img (imgタグが書かれた文字列) が html で埋め込まれているのがわかりますか? p.message__text も同様に外で作って埋め込めばいいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問