Question

Le'ts明确表示，while循环中的条件必须检查新挑战的数量是否尚未完成（如challenge.finished数组中所示）这意味着如果您发现代码中有任何错误，可以显示相同的挑战几次而不是一次（根据需要），请告诉我。

var challenges = {
        names: [],
        info: [],
        mascot: [],
        now: [],
        finished: []
    };
challenges.names = ['',
                  'The Best Mess', //1
                  'Pookie Madness', //2
                  'A Cookie for Rookie', //3
                  'Water Party!', //4
                  'You took my hair?!', //5
                  'Too. Much. Pizza.', //6
                  'Love is All', //7
                 'Mop the Deck', //8
                 'Be ya Piate', //9
                 'Treasure Hunter', //10
                 'Spread the Love', //11
                 'You are Arrested!', //12
                 'DINO Four', //13
                 "Viking's Moment", //14
                 "Let me Fly!", //15
                 'Do it Smart', //16
                 'Just a Luck', //17
                 'Sporty', //18
                 'Adopt my Emoji', //19
                 "Hey, it's me!", //20
                 'Me and the Music', //21
                 'Puffle Combo', //22
                 'Richest Pirate', //23
                 'Just Chill', //24
                 'You are BANNED', //25
                 'Merry Walrus', //26
                 'Goo Red!!!', //27
                 'Goo Blue!!!', //28
                 'Oops I did it again', //29
                 "Summer's love", //30
                 'Follow da Arrows', //31
                 'I Call it Magic', //32
                 'Welcome to CPI!', //33
                 'Color Changer', //34
                 'Time to Mine!', //35
                 "Parties' Enemy", //36
                 'Dab on them', //37
                 'Paint Wall', //38
                 'Foody Hunter', //39
                 'Squid ya Say?', //40
                 'May the Force', //41
                 'Mustache Forever', //42
                 'Smart Match', //43
                 'Effects Expert', //44
                 'My Name Jeff', //45
                 'SPOOOOKY', //46
                 'WANTED'], //47
    challenges.info = ['',
                      'Change your hair 2 times', //1
                      'Wear a crown and a teddy bear', //2
                      'Put on a cookie', //3
                      'Put a watery background', //4
                      "Put on Rookie's wig", //5
                      "Eat a pizza while on the stadium", //6
                      "Change to a lovely background", //7
                      "Put on a mop at the Migrator", //8
                      "Wear at least one pirate-y item", //9
                      "Find a treasure!", //10
                      "Put a heart near your emoji", //11
                      "Put on a police hat", //12
                      "Use a dino face", //13
                      "Wear a viking helmet", //14
                      "Change to a clouds background", //15
                      "Remove an item/s using the button", //16
                      "Generate a random item/s", //17
                      "Pick any ball", //18
                      "Go to the Pet Shop", //19
                      'Use the "It\'s Me" background', //20
                      'Put on headphones', //21
                      'Adopt a puffle', //22
                      'Use the most expensive item', //23
                      'Put on Blizzard Beach glasses', //24
                      "Hold Thor's Hammer", //25
                      "Merry Walrus!", //26
                      'Cheer the red team', //27
                      'Cheer the blue team', //28
                      'Use the fart speech bubble', //29
                      'Pick the lovely sun', //30
                      'Pick the map', //31
                      'Pick any potion', //32
                      'Put the "Welcome CPI" background', //33
                      "Change your emoji's color", //34
                      "Put a hard hat", //35
                      "Pop the balloons", //36
                      "Dabs dabs dabs dabs", //37
                      "Pick a spray can and bricks", //38
                      'Pick 3 different CPI food', //39
                      'Pick a squid stick', //40
                      'Pick a lightsaber', //41
                      'Put on a mustache', //42
                      'Put hair and a head item', //43
                      'Add 3 effects to your emoji', //44
                      'Name your emoji Jeff', //45
                      'Wear at least 1 Halloween item', //46
                      'Go to the jail'], //47
    challenges.mascot = ['',
                           'R', //1
                           'R', //2
                           'R', //3
                           'R', //4
                           'R', //5
                           'R', //6
                           'AA', //7
                           'RH', //8
                           'RH', //9
                           'RH', //10
                           'AA', //11
                           'AA', //12
                           'AA', //13
                           'RH', //14
                           'R', //15
                           'AA', //16
                           'RH', //17
                           'AA', //18
                           'RH', //19
                           'R', //20
                           'R', //21
                           'AA', //22
                           'RH', //23
                           'R', //24
                           'AA', //25
                           'R', //26
                           'R', //27
                           'R', //28
                           'RH', //29
                           'AA', //30
                           'RH', //31
                           'RH', //32
                           'RH', //33
                           'AA', //34
                           'RH', //35
                           'R', //36
                           'R', //37
                           'R', //38
                           'RH', //39
                           'RH', //40
                           'RH', //41
                           'AA', //42
                           'AA', //43
                           'AA', //44
                           'R', //45
                           'RH', //46
                           'RH'], //47
    challenges.now = ['', -1, -1, -1],
    challenges.finished = [],
    total = 0;
var random_number, this_id2;

function addChallenge(i) {
    $('.all_daily_challenges').append('<div class=CPI_challenge' + i + 'o' + challenges.now[i] + ' alt=o' + challenges.mascot[challenges.now[i]] + '> </div>');
    var where_to_add = $('.CPI_challenge' + i + 'o' + challenges.now[i]);
    where_to_add.append('<div id=phone_challenge' + i + 'o' + challenges.now[i] + '_symbol_' + challenges.mascot[challenges.now[i]] + '> </div>');
    where_to_add.append('<div id=Challenge_name' + i + 'o' + challenges.now[i] + '>' + challenges.names[challenges.now[i]] + '</div>');
    where_to_add.append('<div id=Challenge_info' + i + 'o' + challenges.now[i] + '>' + challenges.info[challenges.now[i]] + '</div>');
    where_to_add.append('<div id=challenge_progress' + i + 'o' + challenges.now[i] + '>Collect</div>');
}

for (var i = 1; i <= 3; i++) {
    random_number = Math.floor((Math.random() * challenges.names.length) + 1);
    while ($.inArray(random_number, challenges.now) != -1) {
        random_number = Math.floor((Math.random() * challenges.names.length) + 1);
    }
    challenges.now[i] = random_number;
    addChallenge(i)
}

$(document).on('click', '[id^=challenge_progress]', function () {
    this_id = $(this).attr('id');
    this_id = parseInt(this_id.substr(18, 19));
    challenges.finished.push(challenges.now[this_id]);
    random_number = Math.floor((Math.random() * challenges.names.length) + 1);
    while ($.inArray(random_number, challenges.now) != -1 && $.inArray(random_number, challenges.finished) != -1) {
        random_number = Math.floor((Math.random() * challenges.names.length) + 1);
    }
    $('.CPI_challenge' + this_id + 'o' + challenges.now[this_id]).remove()
    challenges.now[this_id] = random_number;
    addChallenge(this_id)
    alert(challenges.finished)
})

.phone_black_screen {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 6;
}

.CPI_phone {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background: linear-gradient(#3DB8B6, #abd99b);
}

#cpi_phone_title {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin: auto;
    width: 100%;
    height: 10%;
    text-align: center;
    background: #fbf7f7;
    color: #548C02;
    font-size: 40px;
    font-family: 'Loyola';
    line-height: 10vh;
    z-index: 5;
}

#CPI_phone_shadow1 {
    position: absolute;
    top: 11%;
    left: 5px;
    width: 15%;
    height: 5%;
    max-width: 300px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

#CPI_phone_shadow2 {
    position: absolute;
    bottom: 11%;
    right: 0;
    width: 50%;
    height: 30%;
    max-width: 500px;
    content: url('Navigation/shadow1.png')
}

#CPI_phone_shadow3 {
    position: absolute;
    bottom: 11%;
    right: 0;
    left: 0;
    top: 10%;
    height: 15%;
    width: 35%;
    max-width: 500px;
    content: url('Navigation/shadow2.png');
    z-index: 10;
}

.CPI_apps {
    position: absolute;
    left: 0;
    right: 0;
    top: 35%;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 30%;
    width: 90%;
    max-width: 500px;
    background: none;
}

[id^=CPI_app] {
    margin: auto;
}

#exit_phone {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 5vw;
    height: 5.5vw;
    min-width: 30px;
    min-height: 35px;
    max-width: 50px;
    max-height: 55px;
    content: url(Navigation/exit_phone.png);
    cursor: pointer;
    z-index: 10;
}

.CPI_phone_white2 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin: auto;
    width: 100%;
    height: 11%;
    text-align: center;
    background: #fbf7f7;
    color: #548C02;
    font-size: 40px;
    font-family: 'Loyola';
    line-height: 10vh;
    z-index: 6;
    box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.2);
}

#CPI_phone_white2_shadow {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 50%;
    height: 50%;
    max-width: 400px;
    background: gray;
    border-radius: 50%;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}

.all_daily_challenges {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 25%;
    top: 0;
    margin: auto;
    width: 98%;
    height: 40%;
    max-height: 300px;
    max-width: 1000px;
    background: #044F63;
    border-radius: 20px;
    z-index: 6;
    overflow: hidden;
    overflow-x: auto;
}

[class^=CPI_challenge] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: 80%;
    height: 90%;
    background: white;
    border-radius: 20px;
    z-index: 6;
    max-width: 350px;
}

[id^=Challenge_info] {
    position: absolute;
    top: 1vh;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 30%;
    font-size: 20px;
    text-align: center;
}

[id^=phone_challenge] {
    position: absolute;
    left: -30px;
    top: 10px;
    width: 20vw;
    max-width: 80px;
    height: auto;
}

[id*=symbol_AA] {
    content: url('Phone_Challenges/AuntArctic_PC.png');
}

[id*=symbol_R] {
    content: url('Phone_Challenges/Rookie_PC.png');
    width: 15vw;
    max-width: 65px;
}

[id*=symbol_RH] {
    content: url('Phone_Challenges/Rockhopper_PC.png');
    width: 20vw;
    max-width: 85px;
}


[id^=Challenge_name] {
    position: absolute;
    height: 10%;
    left: 0;
    right: 0;
    bottom: 70%;
    top: 0;
    margin: auto;
    z-index: 7;
    font-family: 'Loyola';
    font-size: 30px;
    text-align: center;
}

#name_CPI_challenge {
    position: absolute;
    height: 10%;
    left: 0;
    right: 0;
    bottom: 70%;
    top: 0;
    margin: auto;
    z-index: 7;
    color: white;
    font-family: 'Loyola';
    font-size: 40px;
    text-align: center;
}

[class^=CPI_challenge1] {
    left: 0%;
}

[class^=CPI_challenge2] {
    left: 95%;
}

[class^=CPI_challenge3] {
    left: 175%;
}

[id^=challenge_progress] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 60%;
    margin: auto;
    width: 80%;
    height: 20%;
    max-width: 200px;
    position: absolute;
    border-radius: 20px;
    background: #3db8b6;
    box-shadow: 0 4px 0 #2F918F;
    color: white;
    font-size: 25px;
    font-family: 'Loyola';
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    transition: 0.5s;
}

[id^=challenge_progress]:hover {
    transform: translateY(2px);
    background: #2F918F;
    box-shadow: 0 2px 0 #266F6D;
}

[alt=oR] {
    background: #EEED9A;
    box-shadow: 0 5px 0 #C4D181;
    color: #E6984D;
    font-family: 'Rookie';
}

[alt=oAA] {
    background: #FBF9F6;
    box-shadow: 0 5px 0 #5FBA15;
    color: #3F661B;
    font-family: 'Aunt Arctic';
}

[alt=oRH] {
    background: #ECBA67;
    box-shadow: 0 5px 0 #C26241;
    color: #AD6C2F;
    font-family: 'Rockhopper';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='phone_black_screen'>
  <div class='CPI_phone_white'>
    <div id='cpi_phone_title'>
        Emoji Maker Phone
    </div>
    <div id='exit_phone'> </div>
    <div class='CPI_phone'>
        <div id='CPI_phone_shadow1'></div>
        <div id='CPI_phone_shadow2'></div>
        <div id='CPI_phone_shadow3'></div>
    </div>
    <div id='name_CPI_challenge'> Daily Challenges </div>
    <div class='all_daily_challenges'>
    </div>
    <table class='CPI_apps'>
        <tr>
            <td>
                <div id='CPI_app1'></div>
            </td>
        </tr>
    </table>
    <div class='CPI_phone_white2'>
        <div id='CPI_phone_white2_shadow'></div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- begin snippet: js hide: false console: true babel: false -->

Answer 1

用以下功能替换您的点击功能$('[id^=challenge_progress]').on('click', function() { // your code }。

$(document).on('click','[id^=challenge_progress]',function(){
  this_id = $(this).attr('id');
  this_id = parseInt(this_id.substr(18, 19));
  challenges.finished.push(challenges.now[this_id]);
  random_number = Math.floor((Math.random() * challenges.names.length) + 1);
  while ($.inArray(random_number, challenges.now) != -1 && $.inArray(random_number, challenges.finished) != -1) {
      random_number = Math.floor((Math.random() * challenges.names.length) + 1);
  } 
  $('.CPI_challenge' + this_id + 'o' + challenges.now[this_id]).remove()
  challenges.now[this_id] = random_number;
  addChallenge(this_id)
})

while循环中的条件被破坏（现在有一个片段）

1 个答案: