Question

我已经在Stack Exchange上找到了关于如何对已经存在的图像标记执行此操作的说明，如下所示：

<img src="./img/action_contact.png" onmouseover="this.src='./img/action_contact_hover.png'" onmouseout="this.src='./img/action_contact.png'">

但如果我按照下面的编程方式创建它，我就无法弄清楚如何正确使用单引号和双引号来使代码编译和运行。

$('<img src="./img/action_contact.png" onmouseover="this.src="./img/action_contact_hover.png";" onmouseout="./img/action_contact.png";">')appendTo('#action' + i);

Answer 1

您需要在属性中的JS字符串周围使用转义单引号（即\'）。您在.之前也错过了appendTo。

$('<img src="./img/action_contact.png" onmouseover="this.src=\'hover.jpg\';" onmouseout="this.src=\'original.jpg\';">').appendTo('#action' + i);

然而，更可读的方法是使用jQuery的attr方法。

$('<img src="./img/action_contact.png">')
    .attr('onmouseover', 'this.src="hover.jpg";')
    .attr('onmouseout', 'this.src="original.jpg";')
    .appendTo('#action' + i);

你甚至可以变得非常动态，并使用event delegation和数据属性来完全分离内容和功能，并摆脱丑陋的事件属性。

//Create an example image.
var i = 1;//for example
$('<img class="swap" />')
    .attr('src', 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png')
    .attr('data-hoverover', 'https://cdn.sstatic.net/stackexchange/img/logos/se/se-icon.png')
    .attr('data-hoverout', 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png')
    .appendTo('#action' + i);

//Handle swapping.
$(document)
    .on('mouseenter', 'img.swap', function() {
        var $this = $(this);
        $this.attr('src', $this.attr('data-hoverover'));
    })
    .on('mouseleave', 'img.swap', function() {
        var $this = $(this);
        $this.attr('src', $this.attr('data-hoverout'));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="action1"></div>

Answer 2

您只需使用\转义一些刻度线。

$('<img src="./img/action_contact.png" onmouseover="this.src=\'hover.jpg\';" onmouseout="this.src=\'original.jpg\';">')appendTo('#action' + i);

以编程方式创建<img/>时的Javascript onmouseover和onmouseout

2 个答案: