img.indexOf()
时间: 2023-06-21 12:14:21 浏览: 45
`indexOf()` 是 JavaScript 字符串方法之一,用于查找一个字符串中是否包含另一个字符串,并返回匹配的起始位置。如果未找到匹配项,则返回 -1。
语法如下:
```
string.indexOf(searchValue[, fromIndex])
```
其中:
- `searchValue`:要查找的字符串。
- `fromIndex`:可选参数,从指定索引位置开始查找。
举个例子:
```
const str = 'Hello, world';
console.log(str.indexOf('world')); // 输出 7
console.log(str.indexOf('Goodbye')); // 输出 -1
```
在第一个示例中,`indexOf()` 返回了 `world` 字符串在 `str` 中的起始位置,即 7。在第二个示例中,由于 `Goodbye` 不在 `str` 中,`indexOf()` 返回了 -1。
相关问题
document.onkeydown = function (e) { // 检查是否显示悬浮窗 if (isPopupVisible) { // 获取所有具有相同类名的图片元素 var imgs = document.querySelectorAll('preview-image'); var currentIndex = Array.from(imgs).indexOf(img); // 获取当前图片在数组中的索引 switch (e.keyCode) { case 37: // 左箭头键 currentIndex = (currentIndex - 1 + imgs.length) % imgs.length; img.src = imgs[currentIndex].src; break; case 39: // 右箭头键 currentIndex = (currentIndex + 1) % imgs.length; img.src = imgs[currentIndex].src; break; case 38: // 上箭头键 // 同行之前一张图片 // 实现逻辑代码 break; case 40: // 下箭头键 // 同行之后一张图片 // 实现逻辑代码 break; } } };我添加进入后实际使用时 img.src = imgs[currentIndex].src报错
根据您提供的代码,发现在获取图片元素时,选择器应为`.preview-image`而不是`preview-image`。请将`document.querySelectorAll('preview-image')`修改为`document.querySelectorAll('.preview-image')`,以正确选择具有`.preview-image`类名的图片元素。
修改后的代码如下所示:
```javascript
document.onkeydown = function (e) {
// 检查是否显示悬浮窗
if (isPopupVisible) {
// 获取所有具有相同类名的图片元素
var imgs = document.querySelectorAll('.preview-image');
var currentIndex = Array.from(imgs).indexOf(img); // 获取当前图片在数组中的索引
switch (e.keyCode) {
case 37: // 左箭头键
currentIndex = (currentIndex - 1 + imgs.length) % imgs.length;
img.src = imgs[currentIndex].src;
break;
case 39: // 右箭头键
currentIndex = (currentIndex + 1) % imgs.length;
img.src = imgs[currentIndex].src;
break;
case 38: // 上箭头键
// 同行之前一张图片
// 实现逻辑代码
break;
case 40: // 下箭头键
// 同行之后一张图片
// 实现逻辑代码
break;
}
}
};
```
请注意,为了正确选择图片元素,选择器应该以`.`开头,表示选择具有该类名的元素。
希望这次能解决您的问题!如果还有其他疑问,请随时提问。
Cannot read properties of undefined (reading 'offsetWidth') at img.onload
这个错误是因为在代码中引用的元素的属性offsetWidth未定义。根据提供的引用内容 [1,这个错误可能发生在以下代码段中:
```
oItems.forEach((item, index) => {
//...
item.style.left = minIndex * item.offsetWidth + 'px'
//...
})
```
这段代码中,计算了一个元素的left位置,但是在这之前并没有确保该元素的图像已经完全加载。解决这个问题的方法是在设置left位置之前,确保图像已经加载完成。一个简单的方法是使用img元素的onload事件来监听图像加载完成的事件,然后再设置left位置。例如,可以修改代码如下:
```
oItems.forEach((item, index) => {
//...
item.querySelector('img').onload = () => {
item.style.left = minIndex * item.offsetWidth + 'px'
item.style.top = oArr[minIndex + 'px'
oArr[minIndex += item.offsetHeight
}
//...
})
```
这样,当图像加载完成后再设置left位置,就不会出现"Cannot read properties of undefined (reading 'offsetWidth')"的错误了。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* *2* *3* [JS中一些经常遇到的错误](https://blog.csdn.net/ITjun666/article/details/127433632)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item]
[ .reference_list ]