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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

解決済

vuejs マウスオーバー

bskbbb
bskbbbggg

総合スコア22

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

1回答

0評価

0クリップ

127閲覧

投稿2022/06/20 03:20

実現したいこと:
大きい写真1枚とその下に小さい写真3枚の組み合わせを表示。
大きい写真の下に表示されている小さい写真3枚をそれぞれマウスオーバーしたら大きい写真がマウスオーバーした写真に切り替わる。
また、この組み合わせが2列、3列と増えたときにも
例えば2列目の写真をマウスオーバーしたら、2列目の大きい写真が切り替わる。3列目の写真をマウスオーバーしたら、3列目の大きい写真が切り替わる。
という風にしたい。

現在の状況:
2列目の写真をマウスオーバーすると1列目の大きい写真も切り替わる。同様に1列目の写真をマウスオーバーすると2列目の大きい写真も切り替わる。

個人的な考えとしてはv-forで同じ関数を取得してしまっているので、それを1列目は1列目、2列目は2列目のように列によって取得する関数を分けてあげればできるのかなと想像して調べたりしたのですが、いまいちわかりませんでした。
どうかお力添えいただけると嬉しいです。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/test.css"> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <ul id="example-1"> <div v-for="(item, index) in items" id="restaurant"> <!-- 1つずつのお店 --> <div v-bind:class="restaurant_list" > <!-- 画像が表示されている列 --> <div v-bind:class="restaurant_image"> <!-- 大きい写真の設定 --> <div> <img v-bind:src="item.main_image" v-bind:class="main_image"> </div> <!-- 小見出しの写真 --> <div v-bind:class="image_label"> <div> <img v-bind:src="item.image_sub1" v-bind:class="restaurant_image_images" v-on:mouseover="imgchange1()"> </div> <div> <img v-bind:src="item.image_sub2" v-bind:class="restaurant_image_images" v-on:mouseover="imgchange2()"> </div> <div> <img v-bind:src="item.image_sub3" v-bind:class="restaurant_image_images" v-on:mouseover="imgchange3()"> </div> </div> </div> </div> </div> </ul> <script type="text/javascript" src="../js/test_a.js"></script> </body> </html>
var example1 = new Vue({ el: '#example-1', data:{ //店名、写真、紹介文 items: [ { main_image: "../image/food.jpg", image_sub1:"../image/food.jpg", image_sub2:"../image/food1.jpg", image_sub3:"../image/food2.jpg", restaurant_name:"江戸政", restaurant_voice:"鶏肉の旨みを存分に味わえる、名物のタタキが人気の老舗焼き鳥",restaurant_chara:"焼き鳥好き", restaurant_popular:"人気店"}, { main_image: "../image/taikojaya_1.jpg",image_sub1:"../image/taikojaya_2.jpg", image_sub2:"../image/taikojaya_3.jpg", image_sub3:"../image/taikojaya_4.jpg", restaurant_name:"たいこ茶屋", restaurant_voice:"お刺身食べ放題、ロケ地としても有名な海鮮料理屋さん",restaurant_chara:"海鮮好き", restaurant_popular:"人気店"}, ], //お店の画像が並んでいる列の設定 restaurant_image:"restaurant-image", //ひとつひとつのお店のリストの設定 restaurant_list:"restaurant-list", //お店の一番大きい画像の設定 main_image:"main-image", //小見出しの写真1枚ずつの設定 restaurant_image_images:"restaurant-image-images", //小見出しのレイアウトの設定 image_label:"image-label", }, methods:{ imgchange1:function(){ this.items[0].main_image = this.items[0].image_sub1; this.items[1].main_image = this.items[1].image_sub1; }, imgchange2:function(){ this.items[0].main_image = this.items[0].image_sub2; this.items[1].main_image = this.items[1].image_sub2; }, imgchange3:function(){ this.items[0].main_image = this.items[0].image_sub3; this.items[1].main_image = this.items[1].image_sub3; } } })
.restaurant-image{ display: block; width: 220px; height: 272px; flex: 0 0 220px; } .restaurant-list{ height:272px; width:auto; margin-bottom:50px; position:relative; display:flex; box-sizing:border-box; padding-right:16px; padding-left:16px; } .main-image{ position: relative; display: block; width: 220px; height: 220px; box-sizing: border-box; } .restaurant-image-images{ display: block; width: 44px; height: 44px; margin: 0 3px; cursor: pointer; transition: opacity .6s ease-out; } .image-label{ display: flex; align-items: flex-end; margin-top: 8px; padding-left:30px; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。