與Jquery交換圖像

我對Jquery很新，所以請原諒這個noobie問題。我試圖在用戶點擊相應的超鏈接時交換<h1>元素的背景圖片。 <a>標籤是動態生成的，並且根據SQL表中設置了多少個圖像，隨時可能存在「n」個標籤。與Jquery交換圖像

我的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。我試圖向VAR image設置爲<a>標籤類的（A1，A2，A3）等名稱，然後使用image VAR爲.jpg. URL的一部分改變<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」等等......

我什麼也看不見，我做錯了還是什麼，我試圖做（在變量中抓住類名等）實際上是好的做法或不... ...一些幫助將非常感激。

在此先感謝！

編輯：

編輯後jQuery代碼：

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

來源

2011-10-26 David Barker

更改行：

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

相信指定2個參數到.attr()函數用於改變的屬性值。因此，在你的情況下，它會將類更改爲""。

指定一個參數將返回類

來源

2011-10-26 16:08:02 Curt

感謝簡略，我已經編輯我的帖子上面來反映我的代碼現在的樣子。它（不幸）還沒有工作。謝謝你的協助！ –

發現我的錯誤，它與我的CSS嵌套。所有作品都很棒！謝謝！ –

一個更好的辦法的價值，而不是使用類是設置在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>

希望幫助:)

來源

2011-10-26 16:19:37 will

我喜歡這個解決方案，我之前想用這個解決方案，但是發現自己在使用我所熟悉的方式知道該怎麼做。即使如此，我不能得到這個工作...通過螢火蟲運行發現沒有錯誤，但圖像保持不變:( –

與Jquery交換圖像

回答

相關問題