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/

希望对你有帮助。