不能让.offset()方法在迭代一组列表项时工作

Can't get .offset() method to work when iterating over a set of list items

本文关键字：列表 一组 工作 迭代 offset 方法 不能      更新时间：2023-09-26

本质上，我试图在点击时应用一个类似工具提示的弹出窗口到一组列表项。一切似乎都很好，除了弹出框的定位。我试图使用.offset()来抓取每个列表项的坐标，这样我就可以定位弹出div相对于列表项。我在下面包含了相关的html元素、css和我的脚本。任何帮助将非常感激!

HTML: 

<ul>
    <li class="checked" title="This is a test popup message">Yada yada yada</li>
    <li class="checked" title="This is another test popup message">Yada yada yada</li>
    <li class="checked" title="This is yet another test popup message">Yada yada yada</li>
</ul>
CSS: 

.popup {
    position: absolute;
    width: 300px;
    padding: 20px;
    background: rgba(0,0,0, .5);
    z-index: 10000;
    display: none;
}
JavaScript: 

$(document).ready(function() {
activatePopup = function() {
    var popupMarkup = '<div class="popup">' + '</div>';
    return popupMarkup;
}
$('body').prepend(activatePopup());
$('.checked').each(function() {
    // Sets popup text based on title attribute
    var popup = $('.popup');
    var popupText = $(this).attr('title');
    $(this).attr('title', '');
    //Grabs Position data of trigger element
    var pos = $(this).offset();
    var posTop = pos.top;
    var posLeft = pos.left;

    $(this).click(function() {
        popup.html(popupText);
        if (popup.is(":hidden")) {
            popup.fadeIn('fast');
        } else {
            popup.fadeOut('fast');
        }
        $(this).toggleClass('unchecked');
        $(this).toggleClass('checked');
        setPos(posTop, posLeft);
    });
    setPos = function(top, left) {
        var yPos = (top - 80) + 'px';
        var xPos = (left + 40) + 'px';
        popup.css({'top' : yPos, 'left' : xPos});
    }
});
});

try include 

//Grabs Position data of trigger element
var pos = $(this).offset();
var posTop = pos.top;
var posLeft = pos.left;

inside your click function like:

   $(this).click(function() {
        var pos = $(this).offset();
        var posTop = pos.top;
        var posLeft = pos.left;
        popup.html(popupText);
        if (popup.is(":hidden")) {
            popup.fadeIn('fast');
        } else {
            popup.fadeOut('fast');
        }
        $(this).toggleClass('unchecked');
        $(this).toggleClass('checked');
        setPos(posTop, posLeft);
    });
相关文章：