向類中的每個元素添加隨機字體

Question

試圖使其與類.book的每個div都從數組中分配隨機字體。這是到目前爲止我的代碼

var fonts = ['Gloria Hallelujah', 'Sedgwick Ave', 'Gochi Hand', 'Patrick Hand', 'Kalam', 'Rock Salt', 'Neucha', 'Caveat Brush', 'Schoolbell']; 
var randomfont = fonts[Math.floor(Math.random() * fonts.length)]; 
$(".book").style.fontFamily = randomfont; 

我得到的錯誤是：Uncaught TypeError: Cannot set property 'fontFamily' of undefined

任何人都知道我做錯了嗎？

Answer 1

$(".book")返回一個jquery數組。例如，設置第一個可以使用：

$(".book")[0].style.fontFamily = 

您可以通過$(".book")需要循環得到DOM元素：

$(".book").each(function() { 
    var randomfont = fonts[Math.floor(Math.random() * fonts.length)]; 
    this.style.fontFamily = randomfont; 
}); 

（除非你的意思是他們都設置爲相同的字體，其中在環路外設置randomfont）。

Answer 2

這是因爲您試圖直接在jQuery對象而不是DOM元素上設置fontFamily。

要麼使用jQuery的css方法或使用get/陣列選擇檢索的DOM元素。

在你想要做的每一個元素，另一方面，所以你需要使用each這樣的：

//const fonts = ['Gloria Hallelujah', 'Sedgwick Ave', 'Gochi Hand', 'Patrick Hand', 'Kalam', 'Rock Salt', 'Neucha', 'Caveat Brush', 'Schoolbell']; 
 
const fonts = ['Helvetica', 'Arial', 'Verdana', 'Courier', 'Courier New']; 
 

 
$('.book').each(function(item) { 
 
    const randomfont = fonts[Math.floor(Math.random() * fonts.length)]; 
 
    this.style.fontFamily = randomfont; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="book">Test 1</div> 
 
<div class="book">Test 2</div> 
 
<div class="book">Test 3</div> 
 
<div class="book">Test 4</div> 
 
<div class="book">Test 5</div> 
 
<div class="book">Test 6</div>

Answer 3

希望這將有助於。只需使用document.getElementById('')調用該ID，然後設置字體值即可。

var fonts = ['Impact,Charcoal,sans-serif', 'Sedgwick Ave', ' Helvetica', 'Patrick Hand', 'Kalam', 'Rock Salt', 'Neucha', 'Caveat Brush', 'Schoolbell']; 
var randomfont = fonts[Math.floor(Math.random() * fonts.length)]; 
alert(randomfont); 
var val=document.getElementById("book").style.fontFamily = randomfont;