如何将此jquery转换为函数？

我想将下面的jquery代码转换成一个函数，这样我就可以向列表中添加链接，而不必触摸jquery。我假设我必须将图像名称放入

标记的某个位置

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>

---

添加名为data src的数据属性：

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

---

使用jQuery 1.5+。

您可以在链接中添加

数据img

属性：

<a href="linkpage.htm" class="newslink1" data-img="1.png">

e、 g:

---

更改HTML标记并将所需图像放入数据属性，并将类更改为通用的

新闻链接
：

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







$（'a.newslink'）.bind（'mouseover'，function（））{
$（'img#storyimg'）.attr（'src'，$（this.attr（'rel'））；
});
以下是一个很好的例子：


JS:

HTML:







您可以在不更改标记的情况下执行此操作：

$('a[class^="newslink"]').bind('mouseover', function (e) {
    var num = this.className.match(/newslink(\d+)/i)[1];
    $('img#storyimg').attr('src', num + '.png');
});

可以尝试一下：

$('a.newslink').bind('mouseover', function(){
              var imgname = $(this).attr("src");
              $('img#storyimg').attr("src", imgname);

});







$（'a.newslink'）。悬停（函数（）{
$（'img#storyimg'）.attr（'src'，$（this.attr（'title'））；
});
它们将始终是连续的递增数字，还是可能缺少一个数字。在这种情况下，
的哪个部分可以用来获取ID？这不是
rel
属性的作用。
$('.sb_menu a').bind('mouseover', function() {
    $('#storyimg').attr(src, $(this).data('img'));
});

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

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

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

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

$('a.newslink').live('mouseover', function() {
    $('img#storyimg').attr("src", $(this).attr('ref'));
});

<img id="storyimg" src="1.png" alt="img" />
<ul class="sb_menu">            
    <li><a href="#" class="newslink" ref="1.jpg">Link 1</a></li>
    <li><a href="#" class="newslink" ref="2.jpg">Link 2</a></li>
    <li><a href="#" class="newslink" ref="3.jpg">Link 3</a></li>                        
</ul>

$('a[class^="newslink"]').bind('mouseover', function (e) {
    var num = this.className.match(/newslink(\d+)/i)[1];
    $('img#storyimg').attr('src', num + '.png');
});

$('a.newslink').bind('mouseover', function(){
              var imgname = $(this).attr("src");
              $('img#storyimg').attr("src", imgname);

});

<img id="storyimg" src="1.png" alt="img" />
<ul class="sb_menu">            
    <li><a href="#" class="newslink" title="1.jpg">Link 1</a></li>
    <li><a href="#" class="newslink" title="2.jpg">Link 2</a></li>
    <li><a href="#" class="newslink" title="3.jpg">Link 3</a></li>                        
</ul>

$('a.newslink').hover(function(){
    $('img#storyimg').attr("src", $(this).attr('title'));
});