用Jquery交换图像

Dav*_*ker 5 html javascript jquery

我对Jquery很新,所以请原谅这个noobie问题.我试图<h1>在用户点击相应的超链接时交换元素的背景图像.该<a>标签是动态生成的,有可能取决于有多少图像SQL表被设置在任何时候成为他们的"N"的数量.

我的HTML是:

<div id="feature-image">
    <h1><span>A random heading</span></h1>
</div>

<div id="feature-links">
    <a class="a1" href="#">1</a>
    <a class="a2" href="#">2</a>
    <a class="a3" href="#">3</a>
</div>
Run Code Online (Sandbox Code Playgroud)

<span>标签设置为显示:无

当用户点击#feature-links div中的超链接时,我已经编写了这个Jquery语句.我试图将var设置为tags类image的名称<a>(a1,a2,a3)等,然后<h1>使用imagevar作为.jpg.url的一部分更改CSS背景图像属性.

<script>
$(function(){
    $('#feature-links a').click(function(){
        var image = $(this).attr("class","");
        $('#feature-image h1').css('background-image','url=(\'main_' + image + '.jpg\')');
    });
});
</script>
Run Code Online (Sandbox Code Playgroud)

我的所有图像都被命名​​为"main_a1.jpg","main_a2.jpg"等等......

我看不出我做错了什么,或者我试图做什么(在vars中获取类名等)实际上是不错的做法......一些帮助将非常感激.

提前致谢!

编辑:

编辑后的Jquery代码:

$(function(){
    $('#feature-links a').click(function(){
        var image = $(this).attr('class');
        $('#feature-image h1').css('background-image','url(images/main_' + image + '.jpg)');
    });             
});
Run Code Online (Sandbox Code Playgroud)

Cur*_*urt 5

将行更改为:

var image = $(this).attr("class");
Run Code Online (Sandbox Code Playgroud)

我相信为.attr()函数指定2个参数用于更改属性值.因此,在您的情况下,它会将类更改为"".

指定一个参数将返回该类的值