2016-04-18 5 views
0

Using Underscorejs Sample-Methode.So stylen Sie eine zufällig generierte Liste von Elementen in Javascript

Ist es möglich, der generierten Stichprobe CSS-Stile hinzuzufügen? Zum Beispiel, wie würde ich im zurückgegebenen [1, 6, 2] Array dazu übergehen, alle 3 zurückgegebenen Zahlen in eine andere Farbe zu bringen?

Code: (von Underscore.js)

sample_.sample (Liste, [n]) Erstellen Sie eine Stichprobe aus der Liste. Übergeben Sie eine Zahl, um n zufällige Elemente aus der Liste zurückzugeben. Andernfalls wird ein einzelner zufälliger Eintrag zurückgegeben.

_.sample([1, 2, 3, 4, 5, 6], 3); 
=> [1, 6, 2] 
+0

Warum fügst du keine Bedingungen hinzu? 'if (returnNumber == 5) // mache diesen Listenstil zu..'. –

+0

Es ist nicht klar, was genau Sie fragen. Möchten Sie Objekte wie '[{n: 1, color: 'red'}]'? Möchten Sie DOM-Elemente wie '[' 1']'? –

+0

Die Zahlen werden schließlich Zitate sein. Hilft das JF? – AndrewLeonardi

Antwort

3

Ich hoffe, Sie sind nach einem Weg suchen, um sie zu stylen randomly.Please nicht glauben dies die die beste Lösung ist; Sie können eine Variable erstellen, um zufällige Klassen zu speichern, und sie zum Zitatelement hinzufügen. I erreichte dies mit folgendem Code

var my_res = _.sample([ 
     'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et', 
     'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab', 
     'Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot', 
     'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated', 
     'A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with', 
     'One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.' 
    ], 3); 
    var my_class = _.sample(['style_1','style_2','style_3','style_4','style_5','style_6'],3) 
    var arr_len = my_res.length; 
    var targ = document.getElementById('i_need_quotes_within_this'); 
    for(i=0; i<arr_len; i++){ 
     targ.innerHTML += "<q class="+my_class[i]+">"+my_res[i]+"</q><br/>" 
    } 

ich auch eine Geige auf jsfiddle Erstellt, Sie here die Geige anzeigen können. Bitte lassen Sie mich wissen, wenn Sie etwas lästig finden

EDIT:

HERE you GO. SORRY Ich habe das Problem zum ersten Mal nicht verstanden

+0

Fantastisch. Das ist sehr nah an dem, was ich suchte, danke! Wenn ich wollte, dass alle eine Klasse haben, wie würde ich das tun? – AndrewLeonardi

+0

meinst du dasselbe ihr Layout muss gleich sein .. nur ein paar kleine Unterschiede wie Änderung der Schriftfarbe ?? @AndrewLeonardi? –

+0

und lassen Sie mich wissen, sind Sie in Ordnung mit Inline-Styling? wenn ja. dann weißt du, dass es mit der gegebenen Geige mehr als einfach sein wird, aber ich kann einen mit derselben Klasse veröffentlichen, nur kleine Unterschiede, die zufällig mit ihnen gemacht werden, die Inline-Styling verwenden. –