避免为动态内容制作一堆不同的弹出窗口

Question

问题

我在一个数组中有我的信息，我能够从var MLA动态获取数据并将其显示在照片上方的工具提示/弹出窗口（请参阅index.html）中在页面上的MLA /人员，但页面上的不同位置有56个不同的人，不会在网格中整齐地呈现。

问题

a）有没有办法避免必须制作56个不同的工具提示，以便我可以点击某个人的图像（请参阅index.html），工具提示会显示为相对内部动态内容的人的形象。

scripts.js中

    $(function() {

        // MLAs
        var MLAs = [
          {
            "Name": "Nancy Allan",
            "Age": 62,
            "Constuency": "St. Vital",
            "Party": "NDP",
            "Gender": "Female",
            "Ethnicity": "White"
          },
          {
            "Name": "James Allum",
            "Age": null,
            "Constuency": "Fort Garry-Riverview",
            "Party": "NDP",
            "Gender": "Male",
            "Ethnicity": "White"
          },
          {
            "Name": "Rob Altemeyer",
            "Age": null,
            "Constuency": "Wolseley",
            "Party": "NDP",
            "Gender": "Male",
            "Ethnicity": "White"
          }]

        // Shows a popup with MLA information
        $(".headshot").click(function(){
            var idx = $(this).index() - 1;

            $(".tooltip").fadeIn("slow");
            $(".tooltipName").html(MLAs[idx].Name);
            $(".tooltipParty").html(MLAs[idx].Party);
            $(".tooltipConstuency").html(MLAs[idx].Constuency);
            $(".tooltipEthnicity").html(MLAs[idx].Ethnicity) + ",";
            $(".tooltipAge").html(MLAs[idx].Age);
        });

    // Positioning of the tooltips
    $('.headshot').each(function(){
        var img = $(this);

        img.click(function(){
            $('.tooltip')
            .show(100)
            .text(img.attr('alt'))
            .offset({
                top : img.offset().top + img.height(),
                left : img.offset().left
            });
        });
    });
 });

的index.html

            <div class="tooltip">
                <div class="info">
                    <p class="tooltipName"></p>
                    <p class="tooltipParty"></p> <p class="tooltipConstuency"></p>
                    <p class="tooltipEthnicity"></p> <p class="tooltipAge"></p>
                    </div><!-- /.info -->

                    <div class="arrow-down">
                    </div><!-- /.arrow-down -->
                </div><!-- /.tooltip -->

<img src="assets/img/headshots/allan.jpg" alt="" id="0" class="headshot NDP Female White">
                <img src="assets/img/headshots/allum.jpg" alt="" id="1" class="headshot NDP Male White">
                <img src="assets/img/headshots/altemeyer.jpg" alt="" id="2" class="headshot NDP Male White">

tooltip.scss

/*----------------------------------
TOOLTIP
----------------------------------*/

.tooltip {
    display: none;
    position: relative;
    left: -12px;
    top: -5px;
}

.info {
    @include serifLight;
    background: $yellow;
    color: $black;
    font-size: 1.4rem;
    padding: 10px;
    width: 9%;
    text-align: center;

    p {
        margin: 0px;
    }
}

.tooltipName, {
    font-family: 'Roboto Slab',serif;
    font-weight: 700;
}

.tooltipEthnicity, .tooltipAge {
    display: inline;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid $yellow;
    position: relative;
    left: 36px;
}

Answer 1

您可以使用.offset()值来定位工具提示。

尝试类似fiddle

的内容

$('img').each(function(){
    var img = $(this);

    img.click(function(){
             $('.tooltip')
             .show(100)
             .text(img.attr('alt'))
             .offset({
                top : img.offset().top + img.height(),
                left : img.offset().left
        });
    });



});