Question

基本上，我有两个图像，每个图像都在一个单独的div中。当我在第一张图像上执行mouseenter时，我需要在另一个div中更改第二张图像。

更改的图像出现在代码中带有mouseenter的图像之后。到目前为止，我有

<script>

var Read1 = $("img[src$='/reading1.png']");
var Read2 = $("img[src$='reading2.png']");


$('#shelf-1').mouseenter(function() {
$('#read').find(Read1).replaceWith(Read2)
});
</script>

我是使用jquery的新手，所以我感到迷茫。任何帮助将不胜感激。

Answer 1

将ID放在图片标记而不是div上，以便更容易访问它们。然后它就像

那样简单

$('#read1').mouseenter(function () {
    $('#read2').attr('src', 'reading2.png');
});

如果您的解决方案被出售，它无法工作的原因是因为变量Read1和Read2不正确。 Read1应该是您要查找的字符串选择器，Read2应该是您想要替换元素的正确html。以下应该有效：

<script>
    var Read1 = "img[src$='/reading1.png']";
    var Read2 = "<img src='path/to/reading2.png'>";

    $('#shelf-1').mouseenter(function() {
       $('#read').find(Read1).replaceWith(Read2)
    });
</script>

Answer 2

$('#shelf-1').mouseenter(function() {
$('#read').html("<img src=\"reading2.png\"> </img>");
});

因为你真的在Read2中创建了一个img标签，所以我可以动态地执行它。适合我。看看吧。

使用jquery执行图像查找并使用另一个<div> </div>上的mouseenter替换

2 个答案: