Question

我有这个功能来突出显示div的全部内容：

jQuery.fn.highlight = function () {
    $(this).each(function () {
        var el = $(this);
        $("<div/>")
        .width(el.width())
        .height(el.height())
        .css({
            "position": "absolute",
            "left": el.offset().left,
            "top": el.offset().top,
            "background-color": "#ffff99",
            "opacity": ".7",
            "z-index": "9999999"
        }).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); });
    });
}

问题是通过一些AJAX调用加载内容，它只会突出显示div的顶部。我假设由于当时不知道内容有多大。

我可能会做这样的事情来预览：

$('#preview_text_button').click(function()
{
    var text = $('.texarea').val();
    $('#preview').load('page address', {'text':text});
    $('.preview').show();
    $('.preview').highlight();
});

我要问的是：如何突出显示整个内容？我认为包括它最后会这样做，但它似乎没有。

Answer 1

一些事情：

正如您所识别的那样，您需要在添加文本之前设置div 的大小。使用您的方法，您需要在加载文本后设置（或更新）（使用load完成回调）。

您可能需要outerWidth和outerHeight。

如果用户调整浏览器窗口的大小，则突出显示可能会错位。
jQuery插件中的
this 已经一个jQuery对象。无需使用$()。

jQuery插件应始终返回this，除非他们有充分的理由不这样做。

相反，请考虑在内容（不是div），body和position: absolute，left，top中插入right，并bottom设置为0。确保其所在的元素为position: relative（或以其他方式定位。）在实际加载文本的目标区域中有第二个div。

这是一个例子。我不确定你为什么在最后两行使用.prefix而不是#preview，所以我改了它：

＆＃13;
＆＃13;
jQuery.fn.highlight = function () { // Added return, removed $() return this.each(function () { $("<div/>") .css({ position: "absolute", left: 0, top: 0, right: 0, bottom: 0, "background-color": "#ffff99", opacity: .7, "z-index": 9999999 }).prependTo(this).fadeOut(1000).queue(function () { $(this).remove(); }); }); }; // Just to emulate `load` jQuery.fn.fakeLoad = function(url, data, callback) { return this.each(function() { var $this = $(this); setTimeout(function() { $this.html("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."); callback.call(this); }, Math.random() * 1000); }); }; $('#preview_text_button').click(function() { var text = $('.texarea').val(); // The div to contain the content var div = $("<div/>"); // Clear previous #preview contents, just have our contents div $('#preview').html(div); // Do the load div.fakeLoad('page address', {'text':text}, function() { // We have the text, show it and do the highlight thing $('#preview').show().highlight(); }); });
＆＃13;
#preview { position: relative; }
＆＃13;
<div>When you click the button, after a random delay some text is loaded and highlighted (briefly)</div> <input type="button" id="preview_text_button" value="Click Me"> <div>Some text before the preview</div> <div id="preview"></div> <div>Some text after the preview</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

Answer 2

问题是通过使用jQuery.load()，您正在进行异步调用。这意味着正在加载数据而不会阻塞脚本的其余部分。您不需要立即运行它，而是需要将回调传递给.load函数，如下所示：

$('#preview_text_button').click(function()
{
    var text = $('.texarea').val();
    $('#preview').load('page address', {'text':text}, function() {
        $('.preview').show();
        $('.preview').highlight();
    });
});

在此处阅读.load()的更多内容：http://api.jquery.com/load/

我还会研究AJAX是什么以及它是如何工作的。我通常信任MDN的答案：https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started。

Answer 3

伙计，你不要做最后一件事。你输入一个AJAX请求，然后调用.show（）和.highlight（），一个AJAX请求实际上会将内容放入你的DOM 以后。你的show（）和.highlight必须在.load（）调用的回调中。

PS我也不确定为什么你在使用CSS和伪元素时使用这种难度很大的JS方法，然后只需要为要突出显示的元素添加一个类。

jquery突出显示并不涵盖整个div

3 个答案: