jquery - 我怎样才能把这个jquery变成一个函数？

Question

我想将下面的 jquery 代码转换为一个函数，这样我就可以将链接添加到列表中，而不必接触 jquery。我假设我必须将图像名称放入 <a href>标记某处。

html代码

<img id="storyimg" src="1.png" alt="img" />
<ul class="sb_menu">            
    <li><a href="linkpage.htm" class="newslink1">Link 1</a></li>
    <li><a href="linkpage.htm" class="newslink2">Link 2</a></li>
    <li><a href="linkpage.htm" class="newslink3">Link 3</a></li>                        
</ul>

jquery

$('a.newslink1').bind('mouseover', function() {
    $('img#storyimg').attr("src", "1.png");
});
$('a.newslink2').bind('mouseover', function() {
    $('img#storyimg').attr("src", "2.png");
});
$('a.newslink3').bind('mouseover', function() {
    $('img#storyimg').attr("src", "3.png");
});

Answer 1

添加一个名为 data-src 的数据属性:

<a href="linkpage.htm" class="newslink" data-src="1.png">Link 1</a>

jQuery:

$("a.newslink").bind("mouseover", function() {
    $("img#storyimg").attr("src", $(this).data("src"));
});

适用于 jQuery 1.5+。