主页 / 问题 / 1108091
Accepted
Evgenii Kantemirov
Asked:2020-04-10 05:41:40 +0000 UTC2020-04-10 05:41:40 +0000 UTC

如何在javascript中单击按钮时更改图像

  • 772

我正在尝试通过单击任何按钮替换图像。一张图片的链接写在 this.preImg 中，另一张图片的链接写在 this.postImg 中。变化是通过变量想象发生的。想象变量在点击时被所需的值覆盖。但该函数仍然总是返回原始值。vue.js 项目的 html 片段如下

<template>
    <div>        
        <div  class="preview">                          
             <img  :src='this.getImg' class="media" />
        </div>
        <div   class="btn-group">
            <button   id="first"
                @click="getAnswer"
                class="btn-group__answers">
                {{ this.answers[0].text }}
            </button>
            <button   id="second"
                 @click="getAnswer"
                class="btn-group__answers">
                {{ this.answers[1].text }}
            </button>
            <button   id="third"
                @click="getAnswer"
                class="btn-group__answers">
                {{ this.answers[2].text }}
            </button>           
        </div>
    </div> 
</template>`

src 是一个计算属性。getImg 是一种计算方法，它根据是否按下某个按钮返回图像。

 <script>
    export default {
        name: "test",  
        data: function () {
            return {                
                questions : [
                    {
                        text:"first",
                        answers:[1,2,3]
                    },
                    {
                        text:"second",
                        answers:[1,2,3]
                    },
                    {
                        text:"third",
                        answers:[1,2,3]
                    }
                ],
                preImg:https://www.publicdomainpictures.net/pictures/270000/nahled/sunset-picture.jpg,
                postImg:https://www.publicdomainpictures.net/pictures/200000/velka/fall-in-new-england-1476453700HVx.jpg

            }
        },
        computed:{  
         getImg(){
           let imagine;     
           let img1=this.preImg;
           let img2=this.postImg;              
           let button = document.querySelectorAll('button');                 
           imagine=img1;
           for(let i=0; i<button.length; i++){   
             button[i].addEventListener('click', function(){               
               imagine=img2
               console.log(imagine)         
             })        
           }  
         return imagine;
       }
    }
};
</script>
javascript

1 个回答

  1. Best Answer

    没关系？

    <!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

</head>
<body>
<div id="app" style="height:500px">
    {{num}}
    <div class="preview">
        <img :src='img' class="media" width="200" height="200"/>
    </div>
    <div class="btn-group">
        <button id="0"
                v-on:click="getAnswer($event)">
            1
        </button>
        <button id="1"
                v-on:click="getAnswer($event)">
            2
        </button>
        <button id="2"
                v-on:click="getAnswer($event)">
            3
        </button>
    </div>
</div>

</body>
</html>

<script>
    new Vue({
        el: "#app",
        data: {
            img: 'https://www.publicdomainpictures.net/pictures/270000/nahled/sunset-picture.jpg',
            imgs: [
                {img: 'https://www.publicdomainpictures.net/pictures/270000/nahled/sunset-picture.jpg'},
                {img: 'https://www.publicdomainpictures.net/pictures/200000/velka/fall-in-new-england-1476453700HVx.jpg'},
                {img: 'https://i.pinimg.com/736x/ab/b6/a8/abb6a800ab2193fcedd9bda566b7402c.jpg'},
            ],
            num: 0,
        },
        methods: {
            getAnswer: function (event) {
                targetId = event.currentTarget.id;
                this.img = this.imgs[targetId].img;
                this.num = targetId;
            }
        }
    })
</script>

    • 1

相关问题