单击时更改按钮的值
我有一列我想在框中显示的笑话。当页面被加载时,我想在框中随机显示一个。然后,当我点击框时,我希望它再次将值更改为列表中的另一个随机值。单击时更改按钮的值
目前我只是无法让它工作,不能解决我出错的地方。我有HTML如下:
<input class="box" type="button" value"" />
<ul>
<li>How much do pirates pay to get their ear pierced? </br> A buck anear!</li>
<li>How do pirates talk to one another? </br> Aye to aye!</li>
<li>What did the sea say to the pirate captain? </br> Nothing, it justwaved!</li>
<li>What is a pirates favourite shop? </br> Ar-gos!</li>
<li>When is it the best time for a pirate to buy a ship? </br> 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);
});
});
可有人请告诉我如何使按钮有一个值时,页面加载,然后更改值时按钮被点击。
那么你有两个问题。
第一个是你总是选择相同的笑话(在页面加载时确定)。第二个是你将整个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/
你并不需要加载一个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;
});
});
如果我想将按钮设为div,该怎么办?我可以这样做吗? @cheeseweasel –
你将不得不将'this.value = randomitem'改为'this.innerText = randomitem' –
替代
$(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,因为它不会看起来相同的输入。
如果我想让按钮成为div,该怎么办?我可以这样做吗? @nemesisdesign –
更新回答回答您的评论 – nemesisdesign
你有小提琴,因为当我把它放在它只工作在第一次点击@nemesisdesign –
你应该在你的代码的一些变化:
- 生成随机值每次单击该按钮。在你的代码中,随机值只生成一次。
- 单击按钮时,指定元素文本,而不是元素本身。
- 设置初始值。
函数中的随机生成和赋值封装在您的代码中会很好。现在该代码工作(可以在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'));
});
如果我想将按钮设为div,该怎么办?我可以这样做吗? @ antur123 –
我认为JanHančič已经回答了这个问题,:-)就像他说的那样,点击事件处理程序可以工作,只需通过$(element)更改'$(element).val(...)'。文字(...)'在那里。 –
试试这个小提琴(这是你的一个分支):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());
});
});
如果我想使按钮一个div怎么办?我可以这样做吗? @Jan hancic –
当然,点击处理程序将是相同的。您只需使用.html()而不是.val() –