0

我有一个笑话列表，我想在一个框中显示。加载页面时，我想在框中随机显示一个。然后，当我单击该框时，我希望它再次将值更改为列表中的另一个随机值。

目前我只是无法让它工作，也无法弄清楚我哪里出错了。我的 HTML 如下：

<input class="box" type="button" value"" />
<ul>
    <li>How much do pirates pay to get their ear pierced? &lt;/br&gt; A buck anear!</li>
    <li>How do pirates talk to one another? &lt;/br&gt; Aye to aye!</li>
    <li>What did the sea say to the pirate captain? &lt;/br&gt; Nothing, it justwaved!</li>
    <li>What is a pirates favourite shop? &lt;/br&gt; Ar-gos!</li>
    <li>When is it the best time for a pirate to buy a ship? &lt;/br&gt; Whenit is on sail!</li>
</ul>

脚本是：

    $(document).ready(function () {

    var list = $("ul li").toArray();
    var elemlength = list.length;
    var randomnum = Math.floor(Math.random() * elemlength);
    var randomitem = list[randomnum];

    $('.box').click(function () {
        $(this).val(randomitem);
    });
});

有人可以告诉我如何在页面加载时使按钮具有值，然后在单击按钮时更改值。

小提琴：http: //jsfiddle.net/uRd6N/98/

4

5 回答 5

6

那么你有两个问题。

首先是您总是选择同一个笑话（在页面加载时确定）。第二个是您将整个li元素添加到按钮的值中。

尝试这个：

$(document).ready(function () {
    var list = $("ul li").toArray();
    var elemlength = list.length;

    $('.box').click(function () {
        // get a new joke every time a button is clicked
        var randomnum = Math.floor(Math.random() * elemlength);
        var randomitem = list[randomnum].innerHTML; // use the HTML of the <li>
        $(this).val(randomitem);
    });
});

现场示例：http: //jsfiddle.net/NxdEc/

于 2013-01-24T09:31:09.917 回答
1

你不需要加载一个 jQuery 对象来设置一个值。您还randomitem需要明确获取元素innerText的li

$(document).ready(function () {

    var list = $("ul li").toArray();
    var elemlength = list.length;
    var randomnum = Math.floor(Math.random() * elemlength);
    var randomitem = list[randomnum].innerText;

    $('.box').click(function () {
        this.value = randomitem;
    });
});
于 2013-01-24T09:29:49.540 回答
0

您应该对代码进行一些更改：

  • 每次单击按钮时都会生成随机值。在您的代码中，随机值仅生成一次。
  • 单击按钮时分配元素文本，而不是元素本身。
  • 设置一个初始值。

函数内的随机生成和赋值封装在您的代码中会非常有用。这段代码现在可以运行（可以在http://jsfiddle.net/uRd6N/99/运行它）：

$(document).ready(function () {
    var list = $("ul li").toArray();
    var elemlength = list.length;

    // Encapsulate random value assignment within a function
    var setRandomValue = function(element) {
            var randomnum = Math.floor(Math.random() * elemlength);
            var randomitem = list[randomnum];
            $(element).val($(randomitem).text());
    }

    // Bind click button
    $('.box').click(function () {
        setRandomValue(this);
    });

    // Set random value for the first time
    setRandomValue($('.box'));
});
于 2013-01-24T09:32:43.617 回答
0

代替

$(this).val(randomitem);

和：

$(this).val($(randomitem).text());

PS：甚至更好

$(document).ready(function () {

    var list = $("ul li");
    var elemlength = list.length;
    var randomnum = Math.floor(Math.random() * elemlength);
    var randomitem = list.eq(randomnum);

    $('.box').click(function () {
        this.value = randomitem.text();
    });
});

PPS：如果你想让按钮成为一个 div，你可以做类似的事情：

$(document).ready(function () {

    var list = $("ul li");
    var elemlength = list.length;
    var randomnum = Math.floor(Math.random() * elemlength);
    var randomitem = list.eq(randomnum);

    $('.box').click(function () {
        $(this).html(randomitem.text());
    });
})

请务必更改 div 的样式，因为它看起来与输入的样式不同。

于 2013-01-24T09:30:57.640 回答
0

试试这个小提琴（这是你的一个叉子）：http: //jsfiddle.net/darshanags/qHpkk/1/

HTML（更新）：

<input class="box" type="button" value="Value at page load" />

jQuery：

$(document).ready(function () {

  $('.box').click(function () {

    var $items = $("ul li"),
        list = $items.toArray(),
        elemlength = list.length,
        randomnum = Math.floor(Math.random() * elemlength);

     $(this).val($items.eq(randomnum).text());
  });
});
于 2013-01-24T09:59:23.720 回答