将随机变量传递给 addClass

Question

只是想生成一个随机数，然后将其作为类添加到现有的 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;
}

Answer 1

这里有几个问题。

1. 范围 - 调用 mouseout 方法时变量 randomNum 不存在，因此仅添加您的类。

2. 即使您将其设置为全局变量，如果您多次使用此代码，也无法解决您的问题（情况可能并非如此，因为您似乎正在使用 ID，但以防万一。）

3. 即使您将其设置为全局变量，如果您多次使用此 这是 Math.round 而不是Math.Round

4. 类不应仅由数字组成

我使用 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>

Answer 2

这里存在一个范围界定问题。确保您的随机参考可以通过这两种方法访问。下面我在方法之外声明变量，从 $.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); 
  });

在线演示：http://jsbin.com/icuwav/edit

Answer 3

在将其添加为类之前尝试将其转换为字符串。

编辑：另外，正如其他人提到的那样， Math.Round 需要是 Math.round

Answer 4

Math.Round 不是 javascript 中的方法。然而; Math.round是。

$(function() {
    $("#button_text").hover(function() {
        var randomNum = Math.round(Math.random()*3);
        $("#buttons").addClass(randomNum);
    }, function() {
        $("#buttons").removeClass(randomNum)
    });
});

Answer 5

你的 randomNum 在 mouseenter 函数中用 'var' 声明 - 它对 mouseleave() 不可见。

如果您的类名不以字母开头，您也可能会遇到问题 - 尽管数字可能“正常”，但我不认为它们是有效的类标识符。

Answer 6

如果你想得到一个整数值使用Math.ceil

var randomNum = Math.ceil(Math.random()*3);