根據圖像高度添加一個類

-1

有沒有一種方法可以讓頁面上的所有圖像都以'.photo'類爲基礎，並將'.vertical'類應用到它所在的文章中，如果該圖片的高度超過身高450px？我這樣做的原因是因爲我想要較高的照片不那麼寬，因此添加類.vertical來設置文章的樣式以使該文章的寬度爲500px，而不是正常寬度爲500px ...根據圖像高度添加一個類

基本上如果照片的500px版本顯示在頁面上，並且500像素的照片的高度超過450像素，則應通過添加該文檔的類.vertical來調整其整個文章的大小。

這聽起來令人困惑，但它不是一旦你明白它。我對這個新手很感興趣，我不知道該怎麼做。

來源

2012-09-11 James Charless Dickinson

是的，有。

首先得到圖像高度。 How to get image size (height & width) using javascript?

然後使用.addClass()添加一個類，如果高度符合您的要求。

來源

2012-09-11 01:06:17 sachleen

你能提供一個代碼嗎？我是jQuery –

的新手，但你應該先嚐試自己做，然後用你正在編寫的代碼更新你的問題，如果你仍然需要幫助。 jsbin.com是玩弄東西的好地方。 – sachleen

+1在閱讀您的評論前提出瞭解決方案。 – iambriansreed

嘗試：

$('img.photo').each(function(){ 
    if($(this).height() > 450) 
     $(this).closest('article').addClass('vertical'); 
});

更新添加類父的文章。根據需要更改選擇器article。

來源

2012-09-11 01:08:21 iambriansreed

請檢查我的文章的編輯版本，我不知道如何修改你的代碼，我寫錯了我需要的東西。 –

@JamesCharless更新時間 – iambriansreed

試試這個：

$(".photo").each(function(){ 
    var el = $(this); 
    if (el.height() > 450) 
    el.addClass("vertical"); 
});

來源

2012-09-11 01:08:29 badunk

請檢查我的文章的編輯版本，我不知道如何修改你的代碼，我寫錯了我需要的東西。 –

喜歡的東西：

$(".photo").each(function(i) { 
    if ($(i).height() >450) { 
    $(i).addClass('yourclass'); 
    } 
});

來源

2012-09-11 01:09:05 firestream

請檢查我的文章的編輯版本，我不知道如何修改您的代碼，我寫錯了我需要的東西。 –

希望這將讓你開始：

$('img.photo').each(function(index) { 
    var height = $(this).height(); 
    if (height > 450) { 
     $(this).parent().addClass('vertical'); 
    } 
});

編輯：

關於加入.vertical類到文章t帽子包含圖像，這取決於您的標記。通過找到與.article類最接近的元素，@anonymous有一個可能的想法。如果直接父母是包含圖像的文章，您也可以在上面編輯的代碼中使用父母。

來源

2012-09-11 01:09:49 davidethell

請檢查我的文章的編輯版本，我不知道如何修改您的代碼，我寫錯了我需要的東西。 –

我編輯了代碼。如果沒有看到你的HTML，很難準確地說出你需要什麼，但是無論我擁有什麼，或者@anonymous會讓你朝着正確的方向前進。您應該修改帖子以包含相關內容。 – davidethell

根據圖像高度添加一個類

回答

相關問題