单击时更改按钮的值

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需要明确地得到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); 

用的innerText：

$(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的styiling，因为它不会看起来相同的输入。

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()); 
    }); 
});