使用jQuery根據「名稱」設置div的背景圖像

基本上，我正在處理一個投資組合網站，其中包含15個以上的部分。希望能夠使用我目前已經使用的「名稱」選擇器來顯示片段（即，滑動min）以設置縮略圖div的背景，而無需手動完成所有CSS標記。可能會混淆解釋，也許這個代碼我工作了（這不起作用）可以幫助。使用jQuery根據「名稱」設置div的背景圖像

這裏的實際縮略圖HTML：

<a name="allies" class="portbox port-link allieslink"> 
    <div class="port-info"> 
     <h3>Creative Allies</h3> 
     <p class="port-label">Product</p> 
     <p class="port-detail">Print Design</p> 
     <p class="port-label">Year</p> 
     <p class="port-detail">2010</p> 
    </div> 
</a>

截至目前，該「allieslink」類有這樣的CSS：

.allieslink { 
    background: url(IMG/portfolio/allies-link.jpg) center top no-repeat; 
}

所以我想要做的就是拿出手動CSS - 讓jQuery根據「name」設置進行計算，然後插入與CSS相同的名稱選擇器（添加「-link.jpg」）。

這裏是我當前的jQuery代碼（文檔準備函數內部）：

var artname= $(".port-link").name; 
$(".port-link").css("background","url(IMG/portfolio/" + artname + "-link.jpg) center top no-repeat;");

很顯然，這是行不通的。我不確定爲什麼，因爲我覺得我走在正確的道路上，可能有些愚蠢。只是試圖找出確切的jQuery，使其正確工作。幫幫我？

（截至目前，在CSS類的所有元素，但你能想象，作爲投資組合的增長，這將變得很長。）

來源

2012-06-25 kyle_conrad

'變種artname = $（「港聯」）。attr（'name'）' – Ohgodwhy

我敢打賭，這將獲得約5億個答案，其中大多數將會是相同的。）））但這只是一個誤解：當DOM對象被包裝在jQuery中時，它的屬性（id，name）也被包裝到'attributes'中。所以你要麼採用底層的DOM元素（使用'.get（0）'），要麼只使用'.attr（）'方法。 – raina77ow

順便說一句，我是否錯過了一些東西，現在確實可以把塊元素換成'a'？ – raina77ow

要檢索的name值屬性利用

var artname= $(".port-link").attr('name');

或者

var artname= $(".port-link")[0].name;

您可以通過這種方式檢索name屬性的值。但這並不能完全解決你的問題。在這種情況下，您必須遍歷鏈接併爲每個鏈接設置背景。您可以使用.each()來做到這一點，或者甚至更好地利用.css()這樣的隱式循環方法。

$(".port-link").css("background",function(){ 
    return "url(IMG/portfolio/" + this.name + "-link.jpg) center top no-repeat"; 
});

如果你希望背景定位在懸停center bottom那麼你就可以做到這一點使用jQuery這樣的。

$(".port-link").hover(function(){ 
    // hover in set background position for hover 
    $(this).css('background-position','center bottom'); 
},function(){ 
    // hover out reset background position 
    $(this).css('background-position','center top'); 
});

並刪除懸停CSS。

來源

2012-06-25 13:58:50

完美！最後一點代碼完美地工作。非常感謝。 –

@kyle_conrad，先生，非常歡迎您。 –

其實 - 完美的設定背景圖像，但現在懸停狀態不正確？它只是將背景位置設置爲「0％0％」而不是我在CSS中的「中心底部」，即： .port-link：hover，.port-link.hover {0}背景位置：中心底部; } 試過這樣的事情： \t $（「港link.hover。」）的CSS（「背景位置」功能（）{ \t \t回「中心底部沒有重複」; \t \t。 }）; 但沒有bueno。思考？ –

嘗試var artname= $(".port-link").attr("name")

來源

2012-06-25 13:58:37 Rodolfo

與Joy的回答相同，這將從** first **匹配元素中獲取名稱。 – poncha

試試這個：通過所有匹配的元素

$(".port-link").each(function() { 
    $(this).css('background', 'url(IMG/portfolio/' + $(this).attr("name"); + '-link.jpg) center top no-repeat'); 
});

這種迭代，並相應地使用適當的名稱

來源

2012-06-25 13:59:46 poncha

他們中的每一個應用的背景，你想要得到的屬性名稱，而不是一些字段名稱或許甚而不存在：

var artname= $(".port-link").attr('name');

來源

2012-06-25 14:01:16 jakee

使用jQuery根據「名稱」設置div的背景圖像

回答

相關問題