使用随机 javascript 字符串元素单击按钮刷新 div答案

【问题标题】：Refresh div with button click using random javascript string element使用随机 javascript 字符串元素单击按钮刷新 div
【发布时间】：2015-04-27 22:00:09
【问题描述】：

有几个类似的问题，所以我希望这是一个独特的问题。关于这些类似问题的建议解决方案都没有解决我的问题。如果我搞砸了，请这位初学者谦虚地道歉。

我的页面上有一个空的 div，我正在使用带有数组字符串的 javascript 加载。目前，我有一个在重新加载整个页面的按钮上运行的脚本。我希望该按钮仅使用我的 javascript 数组中的项目重新加载 div。

这是我的代码：

<html>
<head>
<link rel="stylesheet" href="obliqueStyle.css">
<style></style>
</head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <body>
        <div id="wrapper">
        <div id="strategyBox"></div>

         <div id="button">
         <a class="againbutton" onclick="buttonReload()">Again</a>

            <script>
                   var buttonReload = function() {
                        document.getElementById("strategyBox").innerHTML = '<p id="strategyText">' + randomStrategy + '</p>';
                   }
            </script>
         </div>

        </div>
        <script src="os.js"></script>

    </body>

这是我的数组和 JS 的 sn-p（来自 index.html 中引用的 os.js 文件）我用来初始/刷新时加载 div：

var obliqueStrategy = ["Abandon normal instruments",
                   "Accept advice",
                   "Accretion",
                   "A line has two sides"];


var randomStrategy = obliqueStrategy[Math.floor(Math.random() * obliqueStrategy.length)];


                   document.getElementById("strategyBox").innerHTML = '<p id="strategyText">' + randomStrategy + '</p>';

我尝试在 html 中调用与脚本中的函数相同的 javascript，如下所示：

<div id="button">
         <a class="againbutton" onclick="buttonReload()">Again</a>

            <script>
                   var buttonReload = function() {
                        document.getElementById("strategyBox").innerHTML = '<p id="strategyText">' + randomStrategy + '</p>';
                   }
            </script>
         </div>

我尝试过像这样使用 jQuery AJAX 加载函数：

<script>
        $(function() {
            $("#againbutton").on("click", function() {
            $("#strategyBox").load("index.html")
            return false;
            })
        })
</script>

我已经尝试了上述的变体并尝试了其他一些我忘记了我究竟是如何以及做了什么的事情，所以我不能包括它们。尽管它看起来非常简单，但我确实遇到了困难。

提前感谢您的帮助。

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

这是一种方法：http://jsfiddle.net/kxqcws07/

HTML

<div id="wrapper">
    <div id="strategyBox"><p id="strategyText"></p></div>
    <div>
        <input type="button" class="againbutton" value="Again">
    </div>
</div>

Javascript

//wrapping your logic in a namespace helps reduce the chances of naming collisions of functions and variables between different imported js files 
var localNameSpace = function() {
    //private array containing our strings to randomly select
    var obliqueStrategy = [
        "Abandon normal instruments"
        , "Accept advice"
        , "Accretion"
        , "A line has two sides"
    ];

    var api = {
        //bindButtonAction binds the generateRandomStrategy function to the click event of the againbutton
        bindButtonAction: function() {
            $('#wrapper .againbutton').click(api.generateRandomStrategy);
        }
        , generateRandomStrategy: function() {
            //get the position of one of the string randomly
            //Math.random() returns a float value < 1 so multiplying it by 100 gets us a range of (0.* - 99.*)
            //then we Math.floor() that to get rid of the float value and keep just the integer part
            //finally we modulus it with the length of the string array
            //if you are unfamiliar with modulus, what it does is gives you the remainder of a division.  for instance 10 / 3 gives you 3 with a remainder of 1, so 10 % 3 would be just 1.
            //what this does for us is keeps the random offset of our within the bounds of the array length (0 to length -1)
            var randomOffset = Math.floor(Math.random() * 100) % obliqueStrategy.length;
            //finally once we have the offset, we set the html to the string at the position in the array
            $('#wrapper #strategyBox #strategyText').html( obliqueStrategy[randomOffset] );
        }
    };

    return api;
}();

$(document).ready(function() {
    //here we call the bind action so the button will work, but we also explicitly call the generateRandomStrategy function so the page will preload with a random string at the start
    localNameSpace.bindButtonAction();
    localNameSpace.generateRandomStrategy();
});

【讨论】：

非常感谢您的帮助。它确实有效。你介意带我看看这里发生了什么吗？在不占用您太多时间的情况下，我是否走在正确的轨道上？