this.imgs.forEach(img => img.active = false); 报错
时间: 2024-02-09 11:11:38 浏览: 149
如果报错信息是 `Cannot assign to read only property 'active' of object`,那么可能是因为 `this.imgs` 是一个响应式对象,Vue 默认会将其转换成只读的 Proxy 对象。这时候我们需要使用 `Vue.set` 方法来修改 `img` 对象的 `active` 属性,示例如下:
```javascript
this.imgs.forEach(img => {
if (img.active) {
Vue.set(img, 'active', false);
}
});
```
如果报错信息不同,请提供具体的错误信息和相关代码,我会帮助你解决问题。
相关问题
img标签display为block时候再点击非img时候如何关闭
可以通过添加一个点击事件监听器来实现。当用户点击非 img 元素时,可以检查当前是否有显示的 img 元素,如果有,则将其隐藏。
以下是一个示例代码:
```javascript
// 获取所有的 img 元素
const imgs = document.querySelectorAll('img');
// 添加点击事件监听器
document.addEventListener('click', function(event) {
// 检查点击的元素是否为 img 元素
const isImg = event.target.tagName.toLowerCase() === 'img';
// 检查当前是否有显示的 img 元素
const activeImg = document.querySelector('img.active');
// 如果点击的不是 img 元素,并且当前有显示的 img 元素,则隐藏它
if (!isImg && activeImg) {
activeImg.classList.remove('active');
}
});
// 给所有 img 元素添加点击事件监听器
imgs.forEach(img => {
img.addEventListener('click', function() {
// 切换显示/隐藏状态
this.classList.toggle('active');
});
});
```
在上面的代码中,我们首先获取所有的 img 元素,然后添加了一个点击事件监听器。当用户点击页面上的任何元素时,我们会检查当前是否有显示的 img 元素,并将其隐藏。
同时,我们为每个 img 元素添加了一个点击事件监听器。当用户点击 img 元素时,我们将切换其显示/隐藏状态。这里使用了一个.active CSS 类来控制 img 元素的显示状态。
阅读全文
相关推荐









