只想生成一个随机数,然后将其作为类添加到现有div中。
但无法让addClass识别变量。
JS
$(function() {
$("#button_text").mouseenter(function() {
var randomNum = Math.Round(Math.random()*3);
$("#buttons").addClass(randomNum);
}).mouseleave(function() {
$("#buttons").removeClass(randomNum)
});
});
HTML
<div id="buttons">
</div>
任何帮助都非常感激。
感谢您的帮助。
最终解决方案是......
JS
$(function() {
$("#button_text").mouseenter(function() {
randomNum = 'rand' + Math.round(Math.random()*2);
$("#buttons").addClass(randomNum);
}).mouseleave(function() {
$("#buttons").removeClass(randomNum)
});
});
HTML
<div id="buttons">
</div>
<p>Insert intro sentence here.</p>
<div id="button_text">
<p>Insert text here that will display the random button background when moused over</p>
</div>
CSS
#button_text
{
display: block;
}
#buttons
{
width: 200px;
height: 200px;
display: block;
position: absolute;
top: 145px;
left: 370px;
z-index: -999;
}
#buttons.rand0
{
background: url(/hover_buttons.png) no-repeat;
background-position: 0 0;
}
#buttons.rand1
{
background: url(/hover_buttons.png) no-repeat;
background-position: 0 -230px;
}
#buttons.rand2
{
background: url(/hover_buttons.png) no-repeat;
background-position: 0 -440px;
}
答案 0 :(得分:3)
这里有几个问题。
作用域 - 调用mouseout方法时,变量randomNum不存在,因此只添加了类。
即使你把它变成一个全局变量,如果你多次使用这个代码,这也不会解决你的问题(这可能不是这种情况,因为你似乎在使用ID,但以防万一。 )
这是Math.round
而不是Math.Round
课程不应仅由数字
我使用jQuery数据api来存储随机类名,以便您以后可以检索它。以下是您要实现的目标:http://jsfiddle.net/jomanlk/339c5/
$("#button_text").mouseenter(function() {
var randClass = 'randomClass' + Math.round(Math.random() * 3);
$("#buttons").addClass(randClass);
$("#buttons").data('randClassValue', randClass);
}).mouseleave(function() {
var randClass = $("#buttons").data('randClassValue');
$("#buttons").removeClass(randClass)
});
<p id='button_text'>
<a id='buttons'>Buttons</a>
</p>
答案 1 :(得分:1)
尝试将其转换为字符串,然后再将其添加为类。
编辑:另外,正如其他人提到Math.Round
需要Math.round
答案 2 :(得分:1)
这里有一个范围问题。确保两种方法都可以访问随机引用。下面我在我的方法之外声明我的变量,从$.mouseenter()
方法更改其值,然后从$.mouseleave()
方法再次访问它。
在我的例子中,我只是设置一个元素的文本,然后递增文本。您可以将两次调用分别更改为$.text()
至$.addClass()
和$.removeClass()
,从而根据您的需求进行调整。
另请注意,建议不要使用数字作为类名。也许你应该为这些值添加前缀。
var ranNum;
$("#hello")
.mouseenter(function(){
ranNum = Math.round(Math.random()*50);
$(this).text(ranNum);
})
.mouseleave(function(){
$(this).text(ranNum+1);
});
答案 3 :(得分:0)
Math.Round不是javascript中的方法。然而; Math.round 是。
$(function() {
$("#button_text").hover(function() {
var randomNum = Math.round(Math.random()*3);
$("#buttons").addClass(randomNum);
}, function() {
$("#buttons").removeClass(randomNum)
});
});
答案 4 :(得分:0)
您的randomNum在您的mouseenter函数中使用'var'声明 - 它对mouseleave()不可见。
如果你的班级名字没有以字母开头,你也可能会遇到问题 - 虽然数字可能“只是工作”但我认为它们不是有效的类标识符。
答案 5 :(得分:0)
如果要获取整数值,请使用Math.ceil
var randomNum = Math.ceil(Math.random()*3);