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

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

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

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

Q&A

解決済

2回答

1029閲覧

jQueryの条件分岐について

hayakawatakuma

総合スコア21

jQuery

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

0グッド

0クリップ

投稿2018/03/06 10:02

編集2018/03/07 01:10

jQuery初心者です。

if文について下記内容を実装したいのですが上手く行きません。

やりたいこと--------------------------------------------------------------------
1.スマホのみjQueryを実装させたい
2.スマホにて画像をタップした際に、オーバーレイでボタンを表示(ここは完了してます)
3.他の画像をタップした際に、オーバーレイを切り替え、最初にタップした画像のオーバーレイは消える

イメージ説明

問題点--------------------------------------------------------------------
他の画像をタップした際に、
最初にタップした画像のオーバレイが消えない。

イメージ説明

HTML

1 <div class="product" data-model="test"> 2 <div class="photo"> 3 <img src="img/pic_sample.png" alt=""> 4 </div> 5 <div class="body"> 6 <div class="name"><span class="maker">テキスト</div> 7 <div class="text">テキストテキスト。</div> 8 </div> 9 <div class="links"> 10 <div class="innner-wrap"> 11 <a href="/test/" class="btn">リンク1</a> 12 <a href="/test/" class="btn">リンク2</a> 13 <a href="/test/" class="btn">リンク3</a> 14 </div> 15 </div> 16 </div> 17

jquery

1 if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){ 2 $(function(){ 3 $('.product').click(function(){ 4 if((.'links',this).is(':visible![イメージ説明](f2e71e495a59797c8880091c0d0d7fd2.png) $(.'links').hide() 5 }else{$('.links',this).show();}; 6 }); 7 }); 8 } 9

恐れ入りますがご教示をお願いいたします。

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

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

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

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

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

kszk311

2018/03/06 10:08 編集

HTML側も教えてください。とりあえず「$('.links',this).show();」は、elseの中じゃないですかね…?
kszk311

2018/03/06 10:13

あと2点。「どのタイミングでこうなっているので、こうしたい」などと、問題点がどこなのか明確にしてください。それと、初心者なら初心者マークをつけておくといいですよ。
hayakawatakuma

2018/03/07 01:11

説明不足失礼いたしました。質問内容詳細化いたしました。よろしくお願いいたします。
kszk311

2018/03/07 01:56 編集

んー、カッコとかクォーテーションの閉じ忘れがいくつかありますね。「(.'links',this)」を「$('.links', $(this))」にするとかも。シンタックスエラーが多いので、その辺り直して、一度動作を見てみてください。
hayakawatakuma

2018/03/08 05:09

ありがとうございます。解決いたしました!
kszk311

2018/03/08 05:40

よかったです。自己解決として、解決法を記載してクローズ(解決済に)しておいてもらえますか
kei344

2018/03/25 07:30

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。
guest

回答2

0

nakazawaken1さんの仰る通り、
それ以外の画像のボタン部分を消す処理プログラムを追加したことで
解決いたしました。
$('.product .links').not(this).hide();

投稿2018/04/07 13:34

hayakawatakuma

総合スコア21

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

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

0

ベストアンサー

$('.links',this)はクリックした画像のボタン部分のみの指定になりますので、
それ以外の画像のボタン部分を消す処理が必要です。
$('.product').click(function(){と次の行の間に
$('.product .links').not(this).hide();
を入れると希望の動作になると思われます。

投稿2018/03/10 04:54

nakazawaken1

総合スコア94

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問