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 +。

Answer 2

更改HTML标记并将所需图片放入数据属性中，并将您的类更改为通用newslink：

<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'));
});

Answer 3

您可以在链接中添加data-img属性：

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

然后您可以使用以下命令在事件处理程序中访问：

$(this).data('img');

e.g：

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

Answer 4

这是一个很好的例子：

http://jsfiddle.net/maniator/tac3t/

JS：

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

HTML：

<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>

Answer 5

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

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

Answer 6

可以尝试一下：

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

});

Answer 7

<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'));
});

Answer 8

<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'));
});

如何将此jquery转换为函数？

8 个答案: