Question

我有下面的代码，当我将鼠标悬停在此元素上时，“logo p”会更改该元素中每个字符的颜色，因此每个字符都有一个随机颜色。

我应该如何在页面加载时运行此脚本。因此，当页面或特定元素加载时，执行下面的代码。我希望每个角色都有随机颜色，不仅在悬停时，而且在所有时间。

$(document).ready(function() {
    // COLOURS ARRAY
    var colours = Array("#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF",     "#B22222", "#FF0000", "#800000", "#8E388E", "#bc8f8f"), idx;
    $("#logo p").hover(function(){
        var header = $(this); 
        var characters = header.text().split('');
        header.empty();  
        var content = '';
        for(var i = 0; i < characters.length; i++) {
            idx = Math.floor(Math.random() * colours.length);
            content += '<span style="color:'+colours[idx]+'">' + characters[i] + '</span>'; 
        }
        header.append(content);
    }, function() {
        $(this).find('span').contents().unwrap();
    });
});

Answer 1

尝试.each

<script type="text/javascript">
$(document).ready(function() {
// COLOURS ARRAY
var colours = Array("#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF",     "#B22222", "#FF0000", "#800000", "#8E388E", "#bc8f8f"), idx;
$("#logo p").each(function(){
    var header = $(this); 
    var characters = header.text().split('');
    header.empty();  
    var content = '';
    for(var i = 0; i < characters.length; i++) {
        idx = Math.floor(Math.random() * colours.length);
        content += '<span style="color:'+colours[idx]+'">' + characters[i] + '</span>'; 
    }
    header.append(content);
}, function() {
    $(this).find('span').contents().unwrap();
});
});
</script>

Answer 2

将其转换为函数并在页面加载时调用：

$(document).ready(function () {

    function changeElements() {
        // COLOURS ARRAY
        var colours = Array("#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF", "#B22222", "#FF0000", "#800000", "#8E388E", "#bc8f8f"),
            idx;
        $("#logo p").each(function(){
            var header = $(this);
            var characters = header.text().split('');
            header.empty();
            var content = '';
            for (var i = 0; i < characters.length; i++) {
                idx = Math.floor(Math.random() * colours.length);
                content += '<span style="color:' + colours[idx] + '">' + characters[i] + '</span>';
            }
            header.append(content);
        }, function () {
            $(this).find('span').contents().unwrap();
        });
    }
    changeElements();
});

Answer 3

可能我不明白这个问题，但你可以简单地在documnet上执行你的代码：

    $(document).ready(function() {
    var colours = Array("#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF","#B22222", "#FF0000", "#800000", "#8E388E", "#bc8f8f"), idx;
    var header = $("#logo p");
    var characters = header.text().split('');
    header.empty();  
    var content = '';
    for(var i = 0; i < characters.length; i++) {
        idx = Math.floor(Math.random() * colours.length);
        content += '<span style="color:'+colours[idx]+'">' + characters[i] + '</span>'; 
    }
    header.append(content);
});

Fiddle

如果您希望它始终切换颜色，您可以将代码放在setInterval

中

这是Fiddle。

Answer 4

而不是使用hover使用mouseenter和mouseleave并在页面加载时只触发mouseenter元素上的target事件，例如，{{1所以你可以试试这个

.trigger('mouseenter');

DEMO.

这适用于页面加载和$(function(){ var colours = Array( "#B0171F", "#FF3E96", "#FF00FF", "#8B008B", "#9400D3", "#BF3EFF", "#B22222", "#FF0000", "#800000", "#8E388E", "#bc8f8f" ); $("#logo p").on('mouseenter', function(){ var header = $(this), characters = (header.text()).split(''), content = ''; header.empty(); for(var i = 0; i < characters.length; i++) { var idx = Math.floor(Math.random() * colours.length); content += '<span style="color:'+colours[idx]+'">' + characters[i] + '</span>'; } header.append(content); }) .on('mouseleave', function(){ $(this).find('span').contents().unwrap(); }).trigger('mouseenter'); });，并且不需要hover(mouseenter/mouseleave)和load的单独处理程序。

在页面或元素加载上调用JS

4 个答案: