私の関数にクラスを追加する

Question

"ランダムクォートジェネレータ"を作るコースがあります。

私は、このクラスを追加しようとしています：私は私のjQueryで作成した私のアレイに

div.info p { 
    color: #fff; 
    font-size: 1em; 
} 

を。私は完全に失われています。私は自分のコードに

.addClass(div.info p) 

を追加しようとしました、と私はそれが私はそれを行うことになってますが、どのように確認していないかと思います。ここで

は、これまでのところ、私のJSです：あなたは新しい乱数を使用すると、配列にアクセスしようとするたびに生成する必要があるため

$(document).ready(function() { 
    function getQuote() { 
    var quotes = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p" ]; 
    var author = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p" ]; 

    $.each($('.info'), function(i, element) { 
     $(element).html(quotes[randomNum]); 
    }); 

    var randomNum = Math.floor((Math.random() * quotes.length)); 
    var randomQuote = quotes[randomNum]; 
    var randomAuthor = author[randomNum]; 

    $(".quote").text(randomQuote); 
    $(".author").text(randomAuthor); 
    } 

    $(".btn").on("click", getQuote); 
}); 

Answer 1

代わりの要素を選択し、希望のスタイルを追加し、その後のjQueryを使用すると、あなたにそのクラスを追加します段落.addClass("my-paragraph")。このスタイルを引用符に追加するとします：$(".quote").text(randomQuote).addClass("my-paragraph");。

$("p").addClass("my-paragraph");

.my-paragraph { 
 
    color: blue; 
 
    font-size: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>My paragraph</p> 
 
<p>My other paragraph</p>

Answer 2

あなたの問題がある - あなたは異なる結果を毎回したいと仮定します。これを試してみてください：例えば、.MY-段落、CSSクラスセレクタを追加し、

function getQuote() { 
 
    var quotes = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p"]; 
 
    var author = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p"]; 
 

 
    var random = function(max) { 
 
    return Math.floor((Math.random() * max)); 
 
    } 
 
    
 
    $.each($('.info'), function(i, element) { 
 
    $(element).html(quotes[random(quotes.length)]); 
 
    }); 
 

 
    var randomQuote = quotes[random(quotes.length)]; 
 
    var randomAuthor = author[random(author.length)]; 
 

 
    $(".quote").text(randomQuote); 
 
    $(".author").text(randomAuthor); 
 
    
 
} 
 

 
$(".btn").on("click", getQuote);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="info"></div> 
 
<div class="info"></div> 
 
<div class="info"></div> 
 
<div class="info"></div> 
 
<div class="info"></div> 
 
<div class="info"></div> 
 
<div class="info"></div> 
 

 
Quote: 
 
<div class="quote"></div> 
 

 
Author: 
 
<div class="author"></div> 
 

 
<button class="btn">Click me</button>