Hinzufügen einer Klasse zu meiner Funktion

Question

Ich nehme einen Kurs, der erfordert, dass ich einen "Random Quote Generator" mache.

Ich versuche, diese Klasse hinzuzufügen:

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

meiner Arrays ich in meinem jQuery erstellt haben. Ich bin völlig verloren. Ich habe versucht,

.addClass(div.info p) 

zu meinem Code hinzuzufügen, und ich denke, das ist, wie ich es tun soll, aber nicht sicher, wie.

Hier ist meine JS so weit:

$(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

Statt ein Element der Auswahl, CSS-Klassenauswahl hinzufügen, zum Beispiel .my-Absatz und fügen Sie den gewünschten Stil, dann mit jQuery diese Klasse hinzufügen Ihren Absätze .addClass("my-paragraph"). Angenommen, Sie möchten diesen Stil zu Ihren Zitaten hinzufügen: $(".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

Ihr Problem ist, weil Sie eine neue Zufallszahl jedes Mal zu erzeugen, müssen Sie versuchen, die Arrays zuzugreifen - vorausgesetzt, Sie zu einem anderen Ergebnis jedes Mal mögen. Versuchen Sie folgendes:

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>