Question

我有这段代码，我正在生成一个随机颜色并将其转换为HEX，然后我想将其设置为backgroundColor span类的.ribbon a:hover：

<script type="text/javascript">
$(function() {

    var randomColor = Math.floor(Math.random()*16777215).toString(16);
    alert(randomColor);
    $(".ribbon a:hover span").css({

        backgroundColor: '#' + randomColor

    });



});
</script>

这是我的css：

.ribbon a:hover span {
    background: /*<?php printf( "#%06X\n", mt_rand( 0, 0xFFFFFF )); ?>*/ #FFF;
    margin-top:0;
}

它甚至没有提醒我的randomColor变量......我把这个脚本放在</body>标签之前......

Answer 1

jQueryUI不包含jQuery：你仍然需要加载它（之前）。

所以你应该替换

<script src="http://www.google.com/jsapi"></script>
<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript"> google.load("jqueryui", "1.5.2"); </script>

与

<script src="http://www.google.com/jsapi"></script> <!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript">
google.load("jquery", "1.5.2");
google.load("jqueryui", "1.5.2");
</script>

Answer 2

首先，你必须加载jQuery - 你提供的代码只加载jQuery UI。

<script src="http://www.google.com/jsapi"></script>
<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript">
    google.load("jquery", "1.5.2");
    google.load("jqueryui", "1.5.2");
</script>

其次，你不能将函数绑定到:hover选择器，你需要使用jQuery函数.hover：

<script type="text/javascript">
$(function() {


    $(".ribbon a").hover(function() {
        // change to random color on mouseover
        var randomColor = Math.floor(Math.random()*16777215).toString(16);
        alert(randomColor);
        $(this).find('span').css({
            backgroundColor: '#' + randomColor
        });
    }, function() {
        // change back to original color on mouseout
        $(this).find('span').css({
            backgroundColor: '#FFF'
        });
    });
});
</script>

Answer 3

要么你没有导入jQuery，要么你的代码中的其他地方有JS错误导致你的脚本整体崩溃。首先，检查您的控制台是否有任何错误。如果这没有透露任何内容，请尝试将脚本更改为：

<script type="text/javascript">
    $(function(){
        alert('jQuery is alive!');
    });
</script>

jQuery随机颜色 - 在悬停时设置不起作用

3 个答案: