使用 Jquery 交换图像

Question

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

元素的背景图像。 标签是动态生成的，并且随时可以有“n”个数量，具体取决于 SQL 表中设置的图像数量。

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

标记设置为 display:none

我编写了此 Jquery 语句，以便在用户单击 #feature-links div 中的超链接时运行。我试图将 var image 设置为 标签类的名称（a1、a2、a3）等，然后更改 CSS 背景图像属性

使用 image var 作为 .jpg. url 的一部分。

<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”等等...

我看不出我做错了什么，或者我试图做的事情（在变量中获取类名等）是否是实际上是否是好的做法...一些帮助将非常感激。

提前致谢！

编辑：

编辑后的 ​​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>

希望有帮助:)