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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

998閲覧

jQueryで顔写真の紹介

kuroishi

総合スコア53

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2018/05/09 17:38

お世話になっております。

今回は私が書いたコードがうまく反応しないため質問させていただきます。

HTML

<div style="display: flex; align-items: center; justify-content:center; margin-top: 40px; width: 80%; margin-left: auto; margin-right: auto; flex-wrap: wrap;"> <div class="member" id="member_1" alt="1"> <div class="member_sub" alt="1">a</div> <div class="member_sub" alt="1">b</div> <div class="member_sub" alt="1">c</div> </div> <div class="member" id="member_2" alt="2"> <div class="member_sub">a</div> <div class="member_sub">b</div> <div class="member_sub">c</div> </div> <div class="member" id="member_3" alt="3"> <div class="member_sub">a</div> <div class="member_sub">b</div> <div class="member_sub">c</div> </div> <div class="member" id="member_4" alt="4"> <div class="member_sub">a</div> <div class="member_sub">b</div> <div class="member_sub">c</div> </div> <div class="member" id="member_5" alt="5"> <div class="member_sub">a</div> <div class="member_sub">b</div> <div class="member_sub">c</div> </div> </div>

CSS

.member{ width: 250px; height: 250px; display: flex; margin: 10px; background-size: cover; background-position: center; align-items: flex-end; flex-wrap: wrap; align-content: flex-end; text-align: center; background-color: #444; } .member_sub{ width: 100%; height: 30px; background-color: rgba(0,0,0,0.30); color: white; align-items:center; display: flex; justify-content: center; display: block; opacity: 0; }

JS

$(function(){ var number = $(".member").attr('alt'); var mouseover_base =$('#member_'+number); var mouseover_pic =$(mouseover_base>'.member_sub'); $(mouseover_base).mouseover(function () { $(mouseover_pic).css("opacity","1"); }); $(mouseover_base).mouseout(function () { $(mouseover_pic).css("opacity","0"); }); });

このjQueryのコードでは、すべての正方形divで同じid名、class名を振っています。ですが、本来であれば人物の写真をbackground-imageで添付する予定ですが、そこに説明を入れたいと思い、abcを記入しています。ある写真の上で個別に説明が出るように設定したいので、今回JSをこんな風に書きました。altを取得し、mouseover_baseからのプログラムがしっかりと作動していません。
どうすれば、正常に写真の紹介文をopacityを用いて表示できるでしょうか。
個々の親div要素に名前をつけるの難しいです。
また、altが基本的におかしいこともわかってますが、名前をつける意味で使っております。
よろしくお願いいたします。

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

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

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

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

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

m.ts10806

2018/05/09 20:51

動作確認したわけじゃないですけど、文法エラーでてますよね。たぶん。エラー部分確認して調整してみてください。ブラウザ開発ツールのコンソールをご確認を。
Lhankor_Mhy

2018/05/10 03:29

驚きなんですが、これ、エラー出ないですね。
x_x

2018/05/10 04:23

それはもうjQueryですし
guest

回答1

0

ベストアンサー

ひとつ目に、$(mouseover_base>'.member_sub')という書き方はできません。
解決方法は、.children()メソッドを使ってください。

ふたつ目は、$(".member").attr('alt')で取り出せるのはひとつだけ、1です。
なので、mouseover_baseに入っているのは、$('#member_1')だけです。
解決方法ですが、$(".member")でいいのでは?

みっつ目ですが、$(mouseover_pic)はマウスオーバーした画像ごとに変えなきゃいけないですが、その処理がされていません。
解決方法ですが、thisを使ってみては?

以上です。

投稿2018/05/10 03:46

編集2018/05/10 03:48
Lhankor_Mhy

総合スコア35865

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

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

kuroishi

2018/05/10 08:59

ありがとうございました!本当にまだまだなんだと痛感しました。これから頑張ります。 $(function(){ var mouseover_pic =$('.member').children(); $('.member').mouseover(function (en) { var target = $(en.target); var target_sub = $(target).children(); $(target_sub).css("opacity","1"); }); $('.member').mouseout(function () { $(mouseover_pic).css("opacity","0"); }); }); 自分なりの回答でこの解決方法で切り抜けました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問