Question

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

目前我无法让它工作，无法解决我出错的地方。我的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/

Answer 1

你有两个问题。

首先，您总是选择相同的笑话（在加载页面时确定）。第二个是您将整个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/

Answer 2

您不需要加载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;
    });
});

Answer 3

替代

$(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的样式，因为它看起来与输入的样式不同。

Answer 4

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

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

函数中的随机生成和赋值封装在代码中会很有用。此代码现在正在运行（可以在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'));
});

Answer 5

尝试这个小提琴（它是你的一个分支）：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());
  });
});

单击时更改按钮的值

5 个答案: