jQuery Highlight不能覆蓋整個div

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

一些東西：

1. 正如您所確定的，您在添加文本之前先設置div的大小。 使用當前方法，您需要在文本加載后（通過使用load的完成回調）對其進行設置（或更新）。
2. 您可能需要outerWidth和outerHeight 。
3. 如果用戶調整瀏覽器窗口的大小，則您的突出顯示可能會對齊。
4. this在jQuery插件中已經是一個jQuery對象。 無需在其上使用$() 。
5. jQuery插件應該始終返回this除非它們有充分的理由不這樣做。

而是考慮將div插入內容（不是body ）中，並將position: absolute和left ， top ， right和bottom設置為0 。 確保元素位於其position: relative （或其他位置）。在實際加載文本的目標區域中再有一個div 。

這是一個例子。 我不確定為什么您在最后兩行中使用.prefix而不是#preview ，所以我更改了它：

 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(); }); }); 

 #preview { position: relative; } 

 <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> 

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方式，然后在要突出顯示的元素中添加一個類。