Javascript 源图像来自<；李>；列出要在另一个div中显示的样式图像属性

所以我整晚都在研究这个。通常我能够找到答案，或者从包含类似代码的问题的答案中得到答案，但是对于这个问题，我的答案是空的

我有一个UL，每个LI都有自己的“列表样式图像：url（）”属性。目标是，当我将鼠标悬停在每个不同的列表项上时，与所述LI关联的图像将在相邻的DIV中显示得更大

我想这对jQuery来说很简单，但要么不是，要么就是我直接遗漏了什么。我也乐于接受使用纯javascript的想法

由于stackoverflow是我找到大部分答案的地方，我想我应该从这里开始。非常感谢您的帮助。谢谢

HTML:

---

您可以这样做，在每个

li

元素上添加一个属性作为

data src

，然后用悬停的

li

的

data src

属性替换

img

src

请查找下面的代码片段以了解更多信息

var main=function（）{
$（'li'）。悬停（函数（）{
var svgimage=$（this.attr（“数据src”）；
$（'.img'）.attr（“src”，svgimage）；
});
};
$（文档）.ready（主）

包含UL的Div

列出
风格图像
用作源
悬停在上方时

要在其上显示图像的Div
如有必要，愿意使用img元件

由于使用了

.attr（）

选择器，当前实现无法工作

由于

列表样式图像

是CSS属性，从技术上讲不是元素属性，因此可以使用

.CSS（）

方法来访问它，如下所示：

var svgImage = $(this).css("list-style-image");

不过，这只是谜题的一部分，

svgImage

的值现在将包括围绕所需url的

url（“…”

包装器。我会使用JavaScript的

.match（）

函数来实现这一点，但是您可以通过其他很多方式获取URL

下面是上面jQuery示例的工作版本：

    var main = function() {
      $('li').hover(function() {
        var svgimage = $(this).css("list-style-image"),
            svgUrl = svgimage.match(/url\("(.*)"\)/i)[1];
        $('.appear img').attr("src", svgUrl);
      });
    };

---

更新的JSFIDLE:

纯javascript解决方案可能就是这样

[].forEach.call（document.queryselectoral（“li”），函数（e）{
e、 addEventListener（'mouseover'，function（）{
document.getElementsByClassName（'sequent'）[0]。querySelector（'img'）。src=e.style.listStyleImage.slice（4，-1）。替换（/“/g，”）；；
document.getElementsByClassName（'sequent'）[0].querySelector（'p'）.innerHTML=“Loaded:”+e.style.listStyleImage；
});
})；

包含UL的Div

列出
风格图像
用作源
悬停在上方时

要在其上显示图像的Div
如有必要，愿意使用img元件

您从

li

获取的

url

部分错误，它是一个

style

属性，您可以这样获取它

var main=function（）{
$（'li'）。悬停（函数（事件）{
var rawURL=$（event.currentTarget）.css（'list-style-image'）；
var url=rawURL.match（/url\（“（.*”）\/i）[1]；
$（'.img'）.attr（“src”，url）；
});
};
$（文档）.ready（主）

图像来源
来自这些列表项

而不是attr使用css获取元素的css属性

试试这个：

  var main = function() {
  $('li').hover(function() {
    var svgimage = $(this).css("list-style-image");
    // remove url() using regular expression
    svgimage = svgimage.replace('url(','').replace(')','').replace(/\"/gi, "");
    $('.appear img').attr("src", svgimage);
  });
};

---

您的代码在hover上不起作用。我知道，但我不完全确定为什么，如果您有任何见解，我将不胜感激。谢谢您的解释！因为我有“风格”“直接在我的HTML而不是样式表中，我认为attr是我必须使用的。.match函数肯定是我将来要研究的东西。@bhuck.cdouble ohh很高兴它能帮助你，请标记为答案，以供将来参考。我还在学习javascript，所以你的代码比我目前的水平高了一点，但即使看到它在运行，也能帮助我将其分解以完全理解它。非常感谢。实际上，这些行非常简单——您已经在jQuery中使用了它们中的大多数。e、 g.

$（'#foo'）.hover（函数（f）{…}）

几乎等同于

document.getElementById（'foo'）.addEventListener（'onmouseover'，函数（f）{…}）

。jQuery版本可能看起来更紧凑，但在速度和明确性方面，原始javascript是赢家。不要用jQuery-）毒害自己太棒了，谢谢你花时间解释！我认为jQuery的使用会更快，但显然JS更强大，所以从长远来看，它显然是更好的选择。

    var main = function() {
      $('li').hover(function() {
        var svgimage = $(this).css("list-style-image"),
            svgUrl = svgimage.match(/url\("(.*)"\)/i)[1];
        $('.appear img').attr("src", svgUrl);
      });
    };

  var main = function() {
  $('li').hover(function() {
    var svgimage = $(this).css("list-style-image");
    // remove url() using regular expression
    svgimage = svgimage.replace('url(','').replace(')','').replace(/\"/gi, "");
    $('.appear img').attr("src", svgimage);
  });
};