在页面加载时无法将标题更改为随机颜色

时间:2013-03-25 18:44:09

标签: javascript jquery jquery-plugins

当页面加载时,会生成随机颜色并应用于“测试颜色”'文字和RSS提要的标题。

http://jsfiddle.net/chrisloughnane/nqkH4/

问题是RSS提要标题的颜色没有变化。

我设置了一个活动,点击“测试颜色”'并且标题颜色会发生变化,所以我认为它与动态添加的元素有关。

我看过.on()但是没有设法让它工作。

有人可以发布更改页面加载时标题颜色所需的代码吗?

TIA

jQuery插件是FeedEk: http://jquery-plugins.net/FeedEk/FeedEk.html

CODE

$(document).ready(function(){

    $('#divRss').FeedEk({
      FeedUrl : 'http://rss.cnn.com/rss/edition.rss'
    });

    var r = Math.floor(Math.random()*256);
    var g = Math.floor(Math.random()*256);
    var b = Math.floor(Math.random()*256);

    $('#example, .itemTitle a').css("color", getHex(r,g,b));

    $('#example').click(function() {

        $('.itemTitle a').css("color", getHex(r,g,b));

    });

    function intToHex(n){
        n = n.toString(16);
        if( n.length < 2) 
            n = "0"+n; 
        return n;
    }

    function getHex(r, g, b){
        return '#'+intToHex(r)+intToHex(g)+intToHex(b); 
    }

});

HTML

<div id="example">TEST COLOUR</div>
<div id="divRss"></div>

CSS

.feedEkList{width:450px; list-style:none outside none;background-color:#FFFFFF; border:1px solid #D3CAD7; padding:4px 6px; color:#3E3E3E;}
.feedEkList li{border-bottom:1px solid #D3CAD7; padding:5px;}
.feedEkList li:last-child{border-bottom:none;}
.itemTitle a{font-weight:bold; color:#4EBAFF; text-decoration:none }
.itemTitle a:hover{ text-decoration:underline }
.itemDate{font-size:11px;color:#AAAAAA;}

#example { font-weight: bold; cursor: pointer;}

1 个答案:

答案 0 :(得分:2)

<强> - 编辑 -

在回应下面的评论时,timeout不可靠。我扩展了包含的库以允许回调函数。默认值为alert('done'),但它可以作为参数传入,以执行您想要的任何操作。

  

更新小提琴:http://jsfiddle.net/nqkH4/8/

或者,如下所述,您可以轮询目标div的内容以查看其内容是否有更改,如果已更改,您知道呼叫已完成。

我认为问题是轻微延迟内容命中DOM并且脚本试图设置样式。它已经使用了一个小的timeout

 setTimeout(function () {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    var color = getHex(r, g, b);

    $('#example, .itemTitle a').css("color", color);

}, 50);
  

更新小提琴:http://jsfiddle.net/nqkH4/6/