简单的图片库JS

Question

我正在尝试使用单选按钮创建一个简单的图片库。 图像设置为显示：无； 默认情况下。 我想要的是当我点击它们各自的按钮时，它们显示为块。

<html>
<head>
    <style>
        .img { width: 250px;
                max-height: 300px;
                display: none;
        }
    </style>
    <script>
        function picture (a) {
            var pic = document.getElementById('image')
            if (a == 1) {
                pic.src="julia1.jpg"
            } else { pic.src="julia2.jpg"}

            pic.style.display ="block";
        }

    </script>
</head>
<body>
    <img class="img" id="image" src="julia1.jpg">
    <form action="">
        <input type="radio" onclick="picture(1)" name="picture"></input>
        <input type="radio" onclick="picture(2)" name="picture"></input>
    </form>
</body>
</html>

在浏览器控制台上，它说该对象不是一个函数。 那是什么意思？ （这适用于两个输入标签）

Answer 1

最后一行应该是

pic.style.display = "block";

Answer 2

如果有人在寻找简单的 js 库，请查看此示例：

https://codepen.io/zarokr/pen/ZEzBYvY

let current = document.getElementById('current');
let thumbnails = document.getElementsByClassName('thumb');

for(let i = 0; i<thumbnails.length; i++){
    thumbnails[i].addEventListener('click',changeImage);
}

function changeImage(){
    let getsrc = this.getAttribute('src');
    current.setAttribute('src',getsrc);
}

简单的图片库JS

问题描述

2 个解决方案

解决方案1
0 已采纳 2013-05-04 22:51:30

解决方案2
0 2020-03-02 23:36:33

简单的图片库JS

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-05-04 22:51:30

解决方案2 0 2020-03-02 23:36:33

解决方案1
0 已采纳 2013-05-04 22:51:30

解决方案2
0 2020-03-02 23:36:33