如何在悬停时获取imgsrc值，使用纯javascript动态编辑并返回它？

我正在为“缩略图缩放浏览器扩展”编写一个代码，我想在鼠标上方从网站捕获

img src

值，编辑并动态返回它。在回答这个问题的帮助下，到目前为止，我已经编写了捕获它的代码，但是我很难返回值以便编辑它

示例场景

_ _ _ _ _
const imgs=document.getElementsByTagName（'img'）；
const map=fn=>x=>Array.prototype.map.call（x，fn）；
//函数x（z）{返回z；}；/*不起作用*/
//函数x（z）{alert（z）；}；/*行得通*/
映射（img=>{
img.addEventListener（'mouseover'，（e）=>{
//imgs[e.target].onmouseover=x（e.target.src）；/*函数x（z）*/
//document.getElementById（“demo”）.innerHTML=x（e.target.src）；/*工作正常*/
var x=e.target.src；
返回x；
});
})（imgs）
/*我想在这里显示值（函数外部），如下所示*/
document.getElementById（“demo”）.innerHTML=（imgs）；/*返回[object HTMLCollection]*/

我已经注释掉了一些我正在试验的代码

我的问题：

<a href="#"><img src="https://images.unsplash.com/photo-1503844281047-cf42eade5ca5?w=200" alt="Kitten"></a>
<a href="#"><img src="https://images.unsplash.com/photo-1496123932780-8a477309b886?w=200" alt="Kitten"></a>

<script type="text/javascript>
function cleanFilename(filename) {
  const newFilename = 'https://images.unsplash.com/photo-1521923898449-d3f0e8fe1845?w=200';
  return newFilename;
}

const images = document.querySelectorAll('img');

images.forEach(image => {
  image.addEventListener('mouseover', e => {
    e.target.parentNode.href = cleanFilename(e.target.src);
  });
})
</script>

const imgs = document.getElementsByTagName('img');
const callback = src => {
    console.log(src);
    document.getElementById("demo").innerHTML += src;
};

Array.prototype.forEach.call(imgs, img => {
    img.addEventListener('mouseover', (e) => {
        callback(e.target.src.replace('th_', ''));
    });
});
/* I want to display the value here ( outside the function ) as below */
/* You wont be able to do this here, as you don't have values. The hover didn't happen, by the time this code is executed */

为什么

警报

起作用，而

不返回

？我怎样才能做到呢？我应该使用JSON吗

我想做的是

捕获img src值

pic/th_rose.jpg

卸下

th

return

pic/rose.jpg

它应该发生在任何图像的鼠标上方。

PS：请注意，在真实场景中没有id='demo'的h1标记，这是一个示例场景。我知道如何在id='demo'上显示，这不是我想要实现的。我想动态捕获值，编辑并返回它

---

更新答案：

<a href="#"><img src="https://images.unsplash.com/photo-1503844281047-cf42eade5ca5?w=200" alt="Kitten"></a>
<a href="#"><img src="https://images.unsplash.com/photo-1496123932780-8a477309b886?w=200" alt="Kitten"></a>

<script type="text/javascript>
function cleanFilename(filename) {
  const newFilename = 'https://images.unsplash.com/photo-1521923898449-d3f0e8fe1845?w=200';
  return newFilename;
}

const images = document.querySelectorAll('img');

images.forEach(image => {
  image.addEventListener('mouseover', e => {
    e.target.parentNode.href = cleanFilename(e.target.src);
  });
})
</script>

const imgs = document.getElementsByTagName('img');
const callback = src => {
    console.log(src);
    document.getElementById("demo").innerHTML += src;
};

Array.prototype.forEach.call(imgs, img => {
    img.addEventListener('mouseover', (e) => {
        callback(e.target.src.replace('th_', ''));
    });
});
/* I want to display the value here ( outside the function ) as below */
/* You wont be able to do this here, as you don't have values. The hover didn't happen, by the time this code is executed */

好吧，这里有两件事你弄错了

变量
imgs
是
img
元素作为
DOM数组的列表。您没有修改变量
imgs
，因此它将保持不变

（考虑到此处未使用事件）如果
fn
接受输入并返回值，则map方法将以相同的数组顺序返回值数组。这意味着方法
img=>{/*somefunction*/}
应该返回一个值，这里没有
事件侦听器不会立即执行，它将在事件发生时执行，因此您不会立即（或同步）获取src的值，因此您无法在map方法之后立即访问它
从事件侦听器返回与从常规方法返回不同，您可以参考事件处理程序来理解这一点
因此，如果希望
src
处于
悬停状态
，则永远不能同步返回它。您必须使用
回调
。如果需要所有src值的列表（不考虑悬停），可以同步获取它们

场景1:

<a href="#"><img src="https://images.unsplash.com/photo-1503844281047-cf42eade5ca5?w=200" alt="Kitten"></a>
<a href="#"><img src="https://images.unsplash.com/photo-1496123932780-8a477309b886?w=200" alt="Kitten"></a>

<script type="text/javascript>
function cleanFilename(filename) {
  const newFilename = 'https://images.unsplash.com/photo-1521923898449-d3f0e8fe1845?w=200';
  return newFilename;
}

const images = document.querySelectorAll('img');

images.forEach(image => {
  image.addEventListener('mouseover', e => {
    e.target.parentNode.href = cleanFilename(e.target.src);
  });
})
</script>

const imgs = document.getElementsByTagName('img');
const callback = src => {
    console.log(src);
    document.getElementById("demo").innerHTML += src;
};

Array.prototype.forEach.call(imgs, img => {
    img.addEventListener('mouseover', (e) => {
        callback(e.target.src.replace('th_', ''));
    });
});
/* I want to display the value here ( outside the function ) as below */
/* You wont be able to do this here, as you don't have values. The hover didn't happen, by the time this code is executed */

在这种方法中，每当有人将鼠标悬停在图像上时，就会调用回调函数，因此您可以编写代码来处理图像上的src

场景2:

<a href="#"><img src="https://images.unsplash.com/photo-1503844281047-cf42eade5ca5?w=200" alt="Kitten"></a>
<a href="#"><img src="https://images.unsplash.com/photo-1496123932780-8a477309b886?w=200" alt="Kitten"></a>

<script type="text/javascript>
function cleanFilename(filename) {
  const newFilename = 'https://images.unsplash.com/photo-1521923898449-d3f0e8fe1845?w=200';
  return newFilename;
}

const images = document.querySelectorAll('img');

images.forEach(image => {
  image.addEventListener('mouseover', e => {
    e.target.parentNode.href = cleanFilename(e.target.src);
  });
})
</script>

const imgs = document.getElementsByTagName('img');
const callback = src => {
    console.log(src);
    document.getElementById("demo").innerHTML += src;
};

Array.prototype.forEach.call(imgs, img => {
    img.addEventListener('mouseover', (e) => {
        callback(e.target.src.replace('th_', ''));
    });
});
/* I want to display the value here ( outside the function ) as below */
/* You wont be able to do this here, as you don't have values. The hover didn't happen, by the time this code is executed */

同步获取
src
值作为
数组
，但这与
悬停

const imgs = document.getElementsByTagName('img');
const map = fn => x => Array.prototype.map.call(x, fn);
const imageSrcs = map(img => img.src)(imgs);

/* I want to display the value here ( outside the function ) as below */
document.getElementById("demo").innerHTML = imageSrcs;

PS：答案的目的不是给你们工作代码，而是为了
向你解释事情是如何运作的。根据从答案中获得的信息，您应该自己重写代码

返回x返回到哪里？它用于
Imagus扩展筛
，返回它将获得值并将其附加到链接。我必须对图像链接进行正则化，以创建适当的完整URL。这种返回似乎很奇怪，为什么不在手柄内进行操作呢？我正在尝试的图像托管站点有点棘手。是这样的
`因此，我必须编写一个正则表达式来忽略
中的
页面/index.html
，而不是返回它，每当鼠标悬停时，您都会更改
a
的href，这是在偶数处理程序中执行的。如果您创建另一个带有不同src和鼠标悬停的img标记，它只会获得一个图像src，然后它没有得到它的src值。它应该更改图像上方moue上的值，如果您将鼠标悬停在另一个图像上，它的src值应该会出现。您想用新值更改图像src，还是想在其他地方显示修改后的src字符串？它的for
Imagus hover Zoom Browser Extension
过滤器。我正试图为某个托管站点编写一个过滤器，这有点棘手。是这样的
现在图像的链接应该是
imagehosting.com/gallery/flowers/images/rose.jpg
因此，我必须编写一个正则表达式来忽略
中的pages/index.html，如果我向您展示实际工作，您能给我一些建议或任何解决方法吗？它在扩展上工作，并在控制台上正确显示。但是有没有办法返回值而不是console.log（）？这是针对Imagus Hover Zoom Extension filter的。正如我告诉过你的，如果你想要同步src值，你需要使用场景2，在这种情况下你不能使用Hover。如果你想让它们悬停，您需要使用场景1中所示的回调，在这种情况下，您将无法返回它们。如果您想要进入承诺，您可以返回一个承诺，该承诺将在所有img元素至少悬停一次后得到解决。如果我向您展示实际工作，您能否给我一些建议或任何解决方法？是的，如果你能给出实际情况并清楚地解释你想要达到的目标，我也许能更好地帮助你