Question

我目前有一个模式，显示我页面上各种图像的信息。当我点击图像时，会弹出很多信息。但是，为了快速访问，我还希望在悬停时快速显示侧面的信息框。我不知道如何使这项工作，因为我的数据结构如何。

//this displays the information in the modal
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">IMAGE</h4>
            </div>
            <div class="modal-name">
            </div>
            <div class="modal-rarity">
            </div>
            <div class="modal-effect">
            </div>
            <div class="modal-description">
            </div>
            <div class="modal-stack">
            </div>
            <div class="modal-tags">
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>

//script for getting the information from the modal
<script>
    $('#myModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var Title = button.data('title');
        var Rarity = button.data('rarity');
        var Effect = button.data('effect');
        var Description = button.data('description');
        var Stack = button.data('stack');
        var Tags = button.data('tags');
        var image = button.data('image');
        var modal = $(this);
        modal.find('.modal-title').text(Title);
        modal.find('.modal-rarity').text(Rarity);
        modal.find('.modal-effect').text(Effect);
        modal.find('.modal-description').text(Description);
        modal.find('.modal-stack').text(Stack);
        modal.find('.modal-tags').text(Tags);
        modal.find('.modal-body').html('<img src="' + image + '" alt="' + Title + '" class="center-block">');
    })
</script>
// this is an example item that i would be clicking on (modal works) however, i don't know how to trigger this information to show up in a side panel when hovered over.
<div id="items">
    <!--Tier 1 Offence-->
    <li id="item">
        <!--Barbed Wire-->
        <a href="#" data-toggle="modal" data-target="#myModal"
           data-title="Barbed Wire"
           data-rarity="Common"
           data-description="In Range: Mobs take 50% DPS. Barbed wire will inflict on only one mob at a time."
           data-stack="On Stack: +20% radius and +10% DPS."
           data-tags="barbed, wire, barbed wire"
           data-image="images/items/Barbed Wire.png">
            <img src="images/items/Barbed Wire.png" alt="Barbed Wire" class="img-thumbnail">
        </a>
    </li>
</div>

Answer 1

我建议创建一个JavaScript函数来抓取所需的值并将它们连接成一个大字符串，然后输出到侧边栏。对于每个项<a>标记，添加指向该函数的onmouseover=标记，以及指向函数或表达式的onmouseleave=标记，以再次隐藏侧边栏。要从每个数据标记中获取值，请将它们与某些标签和换行符连接起来，并将其显示在id="sidebar"之前设置为display: none或display: hidden的元素中（在CSS），您可以在onmouseover=标记中设置此功能：

function displayTags() { //there are many other ways to structure this, and this is probably not the most efficient way
    var tags = [];
    tags.push(this.getAttribute("data-title"));
    tags.push(this.getAttribute("data-rarity"));
    tags.push(this.getAttribute("data-effect"));
    tags.push(this.getAttribute("data-description"));
    tags.push(this.getAttribute("data-stack"));
    tags.push(this.getAttribute("data-tags"));
    var sidebar = document.getElementById("sidebar"); //or whatever you've named your sidebar
    var out = "Title: " + tags[0] + "<br />Rarity: " + tags[1] + "<br />Effect: " + tags[2]; //and so on
    sidebar.innerHTML = out;
    sidebar.style.display = "visible";
}

如果函数是由事件触发的，this关键字应该引用触发事件的元素。

然后再次隐藏侧边栏，你就可以使用这样的功能了

function hideSideBar() {
    document.getElementById("sidebar").style.display = "none"; //or "hidden", depending on how you want it's presence to affect the layout of the entire page
}

同时加入每个项onmouseleave=标记的<a>。

我所写的内容可能需要一些（很多）调整来处理你所拥有的内容，但我认为我已经在这里做了一般性的想法。

将鼠标悬停在图像上时如何在侧面板中弹出文本（使用模态代码）？

1 个答案: