如何延迟我的功能,以便它看到窗口位置哈希?

时间:2013-08-27 16:18:22

标签: jquery html

我将值传递给数组中的锚点,然后需要在单击时运行函数。 的功能

<script type="text/javascript">
        function SetOption() {
        var hash = window.location.hash.substring(1);
            $('#uniform-id span').text(hash);//Changes the text in the dropdown box
            $("#select id option:contains(" + hash + ")").attr('selected', 'selected');//Takes the hash and looks for an option that contains that hash
        }
    </script>

附加功能

$.each(color, function (index, value) {
var anchor=$('<a class="color">').css({
    height: '30px',
    width: '30px',
    'background-color': value
}).attr({ 
    "href": "#" + colorname[index], //append colorname as hash
    "onclick": "SetOption();", //run function SetOption when clicked
});
    $('#palette').append(anchor);
});
//var columns = $("#palette > a"); this part isn't important for the question.
//for(var i = 0; i < columns.length; i+=16) {
//  columns.slice(i, i+16).wrapAll("<div class='column'></div>");
}

示例数组

var colorname = [];
colorname [ 0 ] = "color 1";
colorname [ 1 ] = "color 2";
colorname [ 2 ] = "color 3";
colorname [ 3 ] = "color 4";

var color = [];
color[ 0 ] = 'rgb(70,60,65)';
color[ 1 ] = 'rgb(95,58,61)';
color[ 2 ] = 'rgb(79,56,57)';
color[ 3 ] = 'rgb(87,50,65)';

目前该函数在为锚标签设置哈希之前运行,输出html如下所示:

<a class="color" href="#color 1" style="height: 30px; width: 30px; background-color: rgb(70, 60, 65);"></a>

看起来锚的href需要首先才能使其起作用,否则我的函数SetOption将需要延迟。

1 个答案:

答案 0 :(得分:1)

在文档“准备就绪”之前,无法安全地操作页面。 jQuery为您检测这种准备状态。包含在$(document).ready()中的代码只有在页面文档对象模型(DOM)准备好执行JavaScript代码后才会运行。包含在$(window).load(function(){...})中的代码将在整个页面(图像或iframe)(而不仅仅是DOM)准备就绪后运行

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

Source