Question

如何在我的jQuery代码上设置闪烁文本：

for(var i in list)
{
    html += '<td class="box"><span class="Ashar">'+ list[i]+'<div class="timeValue">'+ times[list[i].toLowerCase()]+'</div></span></td>';

    if(jsonStr.currentTime == times[list[i].toLowerCase()]+":00")
    {
        $("#audio").html('<audio style="width: 100%;" class="audioDemo" controls preload="none" controlsList="nodownload"><source src="assets/audio/alarm1.mp3" type="audio/mpeg"></audio>');
        $(".audioDemo").trigger("play");

        $('.Ashar').blink(); // I want to put it here                       
    }
}
html += '</table>';
document.getElementById('todayPrayTime').innerHTML = html;

如果我在$('.Ashar').blink();内设置document.getElementById('todayPrayTime').innerHTML = html;，那么它将无效。眨眼无效。

但如果我把document.getElementById('todayPrayTime').innerHTML = html;放在外面

它可以工作，我可以看到闪烁的文字。

我相信这是因为我在$('.Ashar').blink();声明之前放了document.getElementById('todayPrayTime').innerHTML = html;。

怎么办？

更新

闪烁功能

(function($)
        {
            $.fn.blink = function(options) {
                var count = 1;

                var defaults = {
                    delay: 500
                };
                var options = $.extend(defaults, options);

                return this.each(function() {
                    var obj = $(this);
                    setInterval(function() {
                        if ($(obj).css("visibility") == "visible") {
                            $(obj).css('visibility', 'hidden');
                        }
                        else {
                            $(obj).css('visibility', 'visible');
                        }
                    }, options.delay);
                });
            }
        }(jQuery));

Answer 1

问题确实是在将html添加到页面之前放置blink()，这意味着选择器找不到任何元素。

要解决此问题，您可以在代码末尾添加呼叫。由于您不希望所有元素都闪烁，只有那些符合条件的元素，您可能需要添加另一个类来解决这个问题：

for(var i in list)
{
    //Create a var to keep the class.
    var tClass = list[i];



    if(jsonStr.currentTime == times[list[i].toLowerCase()]+":00")
    {
        $("#audio").html('<audio style="width: 100%;" class="audioDemo" controls preload="none" controlsList="nodownload"><source src="assets/audio/alarm1.mp3" type="audio/mpeg"></audio>');
        $(".audioDemo").trigger("play");

        //Add another class to the var:
        tClass += " blinker";

    }

    //Adapt the html var
    html += '<td class="box"><span class="'+ tClass+'">'+ list[i]+'<div class="timeValue">'+ times[list[i].toLowerCase()]+'</div></span></td>';
}
html += '</table>';
document.getElementById('todayPrayTime').innerHTML = html;

//Only make the ones with the "blinker" class blink.
$('.blinker').blink(); // I want to put it here

这会使事情眨眼，就像你想要的那样。

jQuery在innerHTML声明之前设置Blink文本

1 个答案: