Question

我创建了一个应用程序，通过JavaScript，从数组中随机选择一个移动，将其存储为变量，并通过JQuery click事件处理程序将其附加到HTML。我考虑了运动不要重复，似乎有效。但是，每运动十次左右，运动就不会附加到页面上。运行控制台我看到没有错误，只是元素通常会出现的跨度中的空白。我无法弄清楚为什么这只发生1/10的时间。代码有效，否则根本不起作用。我已经在下面附加了JavaScript和HTML文件。我甚至尝试过使用switch语句而不是没有成功。我仍然是编程新手。可以有三个不同的$ document.ready语句与它有关。也许脚本运行不正常而没有被执行？

/*start of wod to go JS*/


var movement1 = movement2 = movement3 = [
    "25 Air Squats",
    "15 Burpees",
    "30 Push Ups",
    "50 Sit Ups",
    "25 Lunges",
    "1 minute Forearm Plank",
    "30 Second Max Effort Tuck Jump"  
];


var i = Math.floor(Math.random() * movement1.length);
var j = Math.floor(Math.random() * movement2.length);
var k = Math.floor(Math.random() * movement3.length);

//code block below ensures movement is not duplicated
if(i==j || i==k || j==k){
var firstPrintOut = movement1[i+1];
var secondPrintOut = movement2[j-1];
var thirdPrintOut = movement3[k+3];     
} else {
var firstPrintOut = movement1[i];
var secondPrintOut = movement2[j];
var thirdPrintOut = movement3[k];   
}


$(document).ready(function(){
    $(".leftButton").click(function(){
    $(".firstMovement").append(firstPrintOut);
    $(".armLeft").slideUp("fast");
    $(".leftButton").attr("disabled",true);//disables button after clicked once
    });
});



$(document).ready(function(){
   $(".middleButton").click(function(){
    $(".secondMovement").append(secondPrintOut); //.secondMovement is class name in HTML
    $(".armMiddle").slideUp("fast");
    $(".middleButton").attr("disabled",true);//disables button after clicked once
    });
});

$(document).ready(function(){
    $(".rightButton").click(function(){
    $(".thirdMovement").append(thirdPrintOut); //.thirdMovement is class name in HTML
    $(".armRight").slideUp("fast");
    $(".rightButton").attr("disabled",true);//disables button after clicked once
    });
});




<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>WOD To Go</title>
     <!-- CSS Styling Below-->
    <link rel = "stylesheet" type = "text/css" href = "normalize.css" />
    <link rel = "stylesheet" type = "text/css" href = "styles.css" />

    <!-- Google Fonts Below -->
   <link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
</head>

<body>
<!-- Header -->
<header class="header">     
    <div>

        <h1>WOD To Go</h1>
        <h2>WOD To Go is the perfect travel tool for anyone who can't make it to the gym but still wants to get a great workout.  Whether it's your basement, hotel room, or even the beach, let WOD To Go be your coach and decide what workout is in store for you today.
        </h2>
        <h3>Click each button for a movement.  Your workout is a combination of each movement split however you like as many times a you like.</h3>
    </div>
</header>



<div class="container">
    <div class="leftColumn">
        <button class="leftButton" type="submit">1st Movement</button>
        <div id="arm">
            <img class="armLeft" src="flexing.png"/>
        </div>
        <span class="firstMovement"></span>
    </div> <!--end left column div-->

    <div class="middleColumn">
    <button class="middleButton" type="submit">2nd Movement</button>
    <div id="arm">
        <img class="armMiddle" src="flexing.png"/>
    </div>  
        <span class="secondMovement"></span>
    </div> <!--end middle column div-->

    <div class="rightColumn">
    <button class="rightButton" type="submit">Third Movement</button>
    <div id="arm">
        <img class="armRight" src="flexing.png"/>
    </div> 
        <span class="thirdMovement"></span>
    </div> <!--end right column div--> 
</div>  <!--//ends container div-->

<footer> <!--//contains ajax weather data-->
<div id="current_temp"></div>
<div id="location"></div>
<div class="nice-weather">If the weather's nice, take it outside!</div>
</footer>

<!--Javascript tags below-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>

</body>

</html>

Answer 1

问题在于，当您在i，j和k之间获得重复项时，您选择替换它们的索引可能位于数组之外。

从数组中获取3个不同元素的一种更简单的方法是随机化数组，然后获取它的前3个元素。有关如何编写执行此操作的shuffle()函数，请参阅How to randomize (shuffle) a JavaScript array?。

var movement = shuffle(movement1);
var firstPrintout = movement[0];
var secondPrintout = movement[1];
var thirdPrintout = movement[2];

Answer 2

棘手但这是我最好的猜测。

如果您获得数组中最后一个元素的重复项并添加randomNumber + 1

无法保证移动存在，因此输出将为空/空并且您不会追加任何内容。

这是一个强制索引相同的代码片段。

var movement1 = movement2 = movement3 = [
    "25 Air Squats",
    "15 Burpees",
    "30 Push Ups",
    "50 Sit Ups",
    "25 Lunges",
    "1 minute Forearm Plank",
    "30 Second Max Effort Tuck Jump"  
];


var i = Math.floor(movement1.length);
var j = Math.floor(movement2.length);
var k = Math.floor(movement3.length);

var firstPrintOut = movement1[i+1];
var secondPrintOut = movement2[j-1];
var thirdPrintOut = movement3[k+3];

console.log(firstPrintOut);
console.log(secondPrintOut);
console.log(thirdPrintOut);

单击偶尔附加到DOM的事件处理程序

2 个答案: