使用 Jquery 交换图像

Question

我对 Jquery 很陌生，所以请原谅这个菜鸟问题。当用户单击相应的超链接时，我试图交换 <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>

<span> 标签设置为 display:none

我编写了这个 Jquery 语句，当用户单击 #feature-links div 中的超链接时运行。我试图将 var image 设置为 <a> 标签类（a1、a2、a3）等的名称，然后使用 image var 作为一部分更改 <h1> 的 CSS 背景图像属性.jpg. 的网址。

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

我所有的图片都被命名为“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)');
    });             
});

Answer 1

换行为：

var image = $(this).attr("class");

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

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

Answer 2

一个更好的方法是设置 href，而不是使用类。

例如：

$('#feature-links a').click(function(e){

    $('#feature-image h1').css({
        'background-image': 'url(' + $(this).attr('href') + ')'
    });

    e.preventDefault(); // Stops the standard link behaviour

});

那么您的链接将直接链接到背景图片：

<a href="/path/to/image.jpg">1</a>

希望有帮助:)