CODEWITHSUNDEEP
javascriptjquery
Sheepdog
Sheepdog

Reputation: 25

Add random class to an Appended div ? (jquery)

This is all of my code for the object I'm working with, but I'm thinking it's only the "create building in screen" part you really need to help me with.

My goal is to have it where instead of saying class="House houseRed", it says something like class="House +'randomClass'" etc, and that variable holds my other class names(i have 5 total). It's for a mini-game I'm working on, and I need the buildings that spawn to have different looks, based on their class names.

//CREATE BUILDING IN MEMOMORY
    function CreateHouseInMemory() {
        //GET VALUES
        var sAddress = $("#HouseAddress").val();
        var sUniqueId = getUniqueId();
        var iMaxResidents = $('input[name=housemaxresidents]').val();

        var oHouse = {
            sType: "House",
            sAddress: sAddress,
            sId: sUniqueId,
            iMaxResidents: iMaxResidents,
            Residents: aResidents = [],
            babyInHouse: false
        };
        oCity.aBuildings.push(oHouse);
        console.dir(oCity.aBuildings);
        return oHouse;
    }


//CREATE BUILDING IN SCREEN
    function CreateHouseInScreen(oHouse)
    {
        $("#City").append('<div id="' + oHouse.sId + '" class="House houseRed" title="' + oHouse.sAddress + '"></div>');
        $(".House").draggable();
        $(".House").droppable();
    }
    ;


//SPAWN BUILDING
    $("#BtnCreateHouse").click(function() {

        var oHouse = CreateHouseInMemory();
        CreateHouseInScreen(oHouse);

    });

Upvotes: 0

Views: 179

Answers (4)

CBusBus
CBusBus

Reputation: 2359

You could use something like

i = parseInt(Math.random() * 4)

to either generate an array index for an array of classes, e.g

classArray = ['class1', 'class2', 'class3', 'class4', 'class5']
obj.className = classArray[i]

or convert the integer to a string and append it to a constant string, e.g

obj.className = "myClass" + i.toString().

Upvotes: 0

Paul Rad
Paul Rad

Reputation: 4882

Something like this

var classesnames = ['toto', 'titi', 'tata', 'tutu'],
    classrandom = classesnames[Math.floor(Math.random() * classesnames.length)];

$("#City").append('<div id="' + oHouse.sId + '" class="House '+ classrandom +'" title="' + oHouse.sAddress + '"></div>');

Upvotes: 1

MonkeyMonkey
MonkeyMonkey

Reputation: 836

You can add a class randomly in a way like this:

function CreateHouseInScreen(oHouse)
{
    var classes = ['houseRed', 'houseBlue', 'houseGreen'];
    var randomIndex = Math.floor(Math.random() * classes.length);
    var div = $('<div id="' + oHouse.sId + '" class="House" title="' + oHouse.sAddress + '"></div>');
    div.addClass(classes[randomIndex]);
    $("#City").append(div);
    $(".House").draggable();
    $(".House").droppable();
}

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Create an array of the target class names 

var array = ['one', 'two','three','four', 'five'];

//then
var random = array[Math.floor(Math.random() * array.length)]

Upvotes: 1

Related Questions