Jqueryを使用した画像スワップ

Question

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> 

<span>タグを表示するように設定されています。どれも私は、ユーザが＃機能リンクのハイパーリンクをクリックしたときに実行するには、このjQueryの文を書いた

div。 imageを<a>タグクラス（a1、a2、a3）などの名前に設定し、.jpg. URLの一部としてimage varを使用して<h1>のCSS背景画像プロパティを変更しようとしていました。

<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」と命名されているというように...

は私が私が間違っているのかを見ることができないか、私がしようとしています何をするかどうか（ヴァルスのクラス名などをつかんでください）実際には良い練習かどうかは...いくつかの助けは本当に感謝されるでしょう。

ありがとうございます！

EDIT：編集後の

の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

変更行に：私は、属性値を変更するために使用され.attr()関数に2つのパラメータを指定すると信じて

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

。したがって、あなたの場合、クラスは""に変更されます。一つのパラメータを指定する

は、代わりにクラスを使用してのhrefを設定することであろう、

Answer 2

より良い方法をクラスの値を返します。例えば

：

$('#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> 

希望:)