Javascript - 創建動態類，設置div的寬度

我正在嘗試創建一個稍微動態的html類，它根據包含在類尾部的數字設置寬度％。注：類名稱將始終以「畫廊，本期特價貨品」Javascript - 創建動態類，設置div的寬度

例子開始：div.gallery項-20 = 20％的寬度

我需要什麼：

獲取類名稱並將其轉換爲字符串以便能夠在最後讀取數字（如果此步驟甚至必要）
將該數字轉換爲適用於每個類的寬度的％名稱。

有人可能會問，爲什麼不只是分開上課呢？我寧願多一點控制，就是這樣。非常感謝您提供任何答案。這裏是我當前的當前的代碼（我是相當新的JS）：

$('.hollow-gallery-04').masonry({ 
 
    // options 
 
    itemSelector: '.gallery-item' 
 
}); 
 

 
var galleryItem = $('[class^="gallery-item-"]'); 
 

 
Object.values(galleryItem).forEach(function(item) { 
 
    this.toString(); 
 
    console.log(galleryItem); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hollow-gallery-04"> 
 
    <div class="gallery-item-20"> 
 
    <img src="http://via.placeholder.com/350x150" alt=""> 
 
    </div> 
 
    <div class="gallery-item-20"> 
 
    <img src="http://via.placeholder.com/500x300" alt=""> 
 
    </div> 
 
</div>

來源

2017-09-22 gumball

您能否澄清一下您關心的控件只通過單獨的課程放棄？ –

我真的不認爲任何JS要做到這一點。這應該使用純粹的CSS來完成，那麼究竟是什麼控制權讓你擔心失敗？

只寫一個類，每畫廊項-X，如：

.gallery-item-20 { width: 20%; }

如果你不想寫出來的每一個從0到100，你應該考慮像薩斯產生你需要的CSS。事情是這樣的：

@for $i from 0 through 100 { 
    .gallery-item-#{$i} { width: #{$i}%; } 
}

這裏有一個很好的教程，也許你開始與薩斯：

https://scotch.io/tutorials/getting-started-with-sass

來源

2017-09-22 16:17:10

謝謝你的提示！ – gumball

謝謝你的提示！該控制主要是爲了速度/靈活性的目的。也爲我的學習目的，雖然。預處理器目前不是一種選擇，因爲我的用戶將是需要抽出音量的低級別前端內容開發人員。作爲我想成爲的「先鋒」，css變量仍然有點遙不可及，因爲我的很多客戶的客戶可能仍然在使用IE8版本。 – gumball

沒有理由從Sass或Less生成的CSS應該與IE8不兼容，所以不要讓它阻止你。另外，關於Sass最好的是，它仍然是CSS。你可以在你想要的時候使用糖..根據我的經驗，我發現它實際上更好地使低級別開發人員能夠在更短的時間內生成更好的代碼。 –

這將是做到這一點的一種方法：

var getValue = function(classString) { 
    return parseInt(classString.substring(classString.lastIndexOf('-') + 1), 10); 
} 

galleryItem.each(function() { 
    $(this).css(
    'width', 
    getValue(this.className) + '%' 
); 
});

工作示例https://jsfiddle.net/ytL4g8ps/

來源

2017-09-22 16:18:15

Javascript - 創建動態類，設置div的寬度

回答

相關問題