jQuery，每次點擊時生成隨機主類別

Question

我有一個（初學者）問題，我想生成一個隨機的，在這個例子中，Gender將決定從哪個數組中選擇名稱。這工作正常，如果我運行代碼與固定變量如var Gender = 'boy'，但是當我嘗試使這一步我很不成功。目標是每次點擊Randomize按鈕時隨機化一個性別，並從相應的數組中獲取一個名稱。

在看過像this one這樣的例子後，仍然無法解決我的問題，我開始想知道我在失敗的時候如此悲慘。我明白，也許這不應該真的成爲一個新的問題在這裏Stackoverflow，因爲它是如此基本，但我真的確實很感謝我用這個。

jsFiddle of my (nonworking) code

//var Gender = 'boy' /*for testing*/ 

var GenderSelection = [ 
    'boy', 
    'girl' 
    ]; 

    var Gender = Math.floor(Math.random()*GenderSelection.length); 

    /* previous, broken code 
    maxGenderSelection = GenderSelection.length; 
    var Gender = Math.floor(Math.random()*(GenderSelection.length)); 
    */ 

if(Gender == 'boy') { 
///////////////////////////// 
// Foretagsnamn (Name) // 
///////////////////////////// 
    var Foretagsnamn = [ 
    'Matt', 
    'Carl', 
    'Ron' 
    ], 
    //the current sentences length 
    maxForetagsnamn = Foretagsnamn.length; 

// get and return a random sentences from array 
function getRandomForetagsnamn() { 
    //calculate a random index 
    var rndIdxForetagsnamn = Math.floor(Math.random()*(maxForetagsnamn)); 
    //return the random sentence 
    return Foretagsnamn[rndIdxForetagsnamn];       
} 

var randomName = getRandomForetagsnamn(); 

//show a random sentences in a DOM selector 
function showRandomForetagsnamn(selector){ 
    var randomForetagsnamn = getRandomForetagsnamn(); 
    randomName = randomForetagsnamn; 
    $(selector).html(randomForetagsnamn); 
} 
} 

if(Gender == 'girl') { 
///////////////////////////// 
// Foretagsnamn (Name) // 
///////////////////////////// 
    var Foretagsnamn = [ 
    'Lisa', 
    'Ann', 
    'Sara' 
    ], 
    //the current sentences length 
    maxForetagsnamn = Foretagsnamn.length; 

// get and return a random sentences from array 
function getRandomForetagsnamn() { 
    //calculate a random index 
    var rndIdxForetagsnamn = Math.floor(Math.random()*(maxForetagsnamn)); 
    //return the random sentence 
    return Foretagsnamn[rndIdxForetagsnamn];       
} 

var randomName = getRandomForetagsnamn(); 

//show a random sentences in a DOM selector 
function showRandomForetagsnamn(selector){ 
    var randomForetagsnamn = getRandomForetagsnamn(); 
    randomName = randomForetagsnamn; 
    $(selector).html(randomForetagsnamn); 
} 
} 

else { 
    // code to be executed if condition is false 
    alert('No soup for you!'); 
} 



/////////////////////////////////////////////////// 
// Foretagsbeskrivning (Workdescription) // 
/////////////////////////////////////////////////// 


var Foretagsbeskrivning = [ 
    'is an ice cream vendor', 
    'is a telemarketer', 
    'builds hybrid cars' 
    ], 
    //the current sentences length 
    maxForetagsbeskrivning = Foretagsbeskrivning.length; 

//get and return a random sentences from array 
function getRandomForetagsbeskrivning() { 
    //calculate a random index 
    var rndIdxForetagsbeskrivning = Math.floor(Math.random()*(maxForetagsbeskrivning)); 
    //return the random sentence 
    return Foretagsbeskrivning[rndIdxForetagsbeskrivning];       
} 


//show a random sentences in a DOM selector 
    //vad är en DOM selector, för alla taggar i html eller? 
function showRandomForetagsbeskrivning(selector){ 
    var randomForetagsbeskrivning = getRandomForetagsbeskrivning(); 
    $(selector).html(randomForetagsbeskrivning); 
} 


//////////////////////////// 
// Målsättning (Goal) // 
//////////////////////////// 


var Malsattning = [ 
    '@@person@@ wants to serve a combination of cooling flavours', // aimed at ice cream vendor 
    'The long term goal is for @@person@@ to buy ', // aimed at ice cream vendor 
    'The vision is for @@person@@ to be the most productive salesperson in the office', // aimed at telemarketer 
    'The vision is for @@person@@ to call more than 5000 customers this week', // aimed at telemarketer 
    'The goal for @@person@@ is to develop a car that can travel in the speed of light', // aimed at car builder 
    '@@person@@ wants to create a vehicle capable of being powered by water' // aimed at car builder 
    ], 
    //the current sentences length 
    maxMalsattning = Malsattning.length; 

//get and return a random sentences from array 
function getRandomMalsattning() { 
    //calculate a random index 
    var rndIdxMalsattning = Math.floor(Math.random()*(maxMalsattning)); 
    //return the random sentence 
    return Malsattning[rndIdxMalsattning];       
} 


//show a random sentences in a DOM selector 
    //vad är en DOM selector, för alla taggar i html eller? 
function showRandomMalsattning(selector){ 
    var randomMalsattning = getRandomMalsattning(); 
    $(selector).html(randomMalsattning.replace('@@person@@', randomName)); 

} 





////////////////// 
// Output // 
////////////////// 


//used to output the different sentences 
//used by .click & .ready beneath 
var outputLista = function() { 
    showRandomForetagsnamn(".foretagsnamn"); 
    showRandomForetagsbeskrivning(".foretagsbeskrivning"); 
    showRandomMalsattning(".malsattning"); 
    } 


$('.rndButton').click(function(e){ 
    outputLista(); 
    console.log('get random sentences at click...'); 
}); 

//generates random sentences when the page loads 
$('.rndButton').ready(function(e){ 
    console.log('get random sentences at page load...'); 
    outputLista(); 
}); 

Answer 1

試試這個：

你的代碼是這麼多多餘的。我認爲這是你想達到的。

var GenderSelection = [ 'boy', 'girl' ], 
    Foretagsnamn = [],  
    randomName = "", 
    Foretagsbeskrivning = [ 
    'is an ice cream vendor', 
    'is a telemarketer', 
    'builds hybrid cars' 
    ],  
    maxForetagsbeskrivning = Foretagsbeskrivning.length, 
    Malsattning = [ 
    '@@person@@ wants to serve a combination of cooling flavours', // aimed at ice cream vendor 
    'The long term goal is for @@person@@ to buy ', // aimed at ice cream vendor 
    'The vision is for @@person@@ to be the most productive salesperson in the office', // aimed at telemarketer 
    'The vision is for @@person@@ to call more than 5000 customers this week', // aimed at telemarketer 
    'The goal for @@person@@ is to develop a car that can travel in the speed of light', // aimed at car builder 
    '@@person@@ wants to create a vehicle capable of being powered by water' // aimed at car builder 
    ], 
    //the current sentences length 
    maxMalsattning = Malsattning.length; 

function onRandomize(){ 

var index = Math.floor(Math.random()*GenderSelection.length), 
    Gender = GenderSelection[index], 
    workDescription = getRandomWorkDescription(), 
    goal = getRandomMalsattning(); 

    Foretagsnamn = [ 'Matt', 'Carl', 'Ron'];     
    if(Gender == 'girl') { 
     Foretagsnamn = [ 'Lisa', 'Ann', 'Sara' ]; 
    } 

    randomName = getRandomForetagsnamn() 
    $(".foretagsnamn").text(randomName); 
    $(".foretagsbeskrivning").text(workDescription); 
    var replaceName = goal.replace("@@person@@",randomName);  
    $(".malsattning").text(replaceName); 
} 

// get and return a random sentences from array 
function getRandomForetagsnamn() { 
    var index = Math.floor(Math.random()*(Foretagsnamn.length));  
    return Foretagsnamn[index]; 
} 

function getRandomWorkDescription(){ 
    var index = Math.floor(Math.random()*(maxForetagsbeskrivning)); 
    return Foretagsbeskrivning[index]; 
} 

function getRandomMalsattning() {  
    var index = Math.floor(Math.random()*(maxMalsattning));  
    return Malsattning[index];       
} 

onRandomize(); 

$('.rndButton').click(function(e){ 
    onRandomize(); 
}); 

工作小提琴這裏：http://jsfiddle.net/hweUw/8/

我希望它能幫助。