Html, javascript:滚动列表框项目-并为每个项目显示提示

html, javascript: scrolling through list box items - and display prompt for each item

本文关键字：项目 提示 显示 Html javascript 滚动 列表      更新时间：2023-09-26

所以我需要做的是:当我从列表框中选择一个项目时，我需要能够在单独的框中动态显示该项目的附加信息。例如，假设我正在滚动浏览汽车列表，对于我选择的每辆车，我将显示价格，颜色，里程等。这个想法在外观和感觉上类似于当用户悬停在元素旁边时弹出的提示符。换句话说，理想情况下，我会看到一个小框神奇地弹出，就在物品旁边，上面有所有需要的信息。对于如何实现它有什么建议吗?

更新:澄清一下我在找什么。我最终通过响应change()事件并手动更新之前为此目的定义的html元素来实现它，就像下面的答案之一所建议的那样:

$('#available-elements').change(function() {
    var id = $(this).val();
    var element = find_element(id);//retrieve complete element info
    $('#the_prompt').show();
    $('#prompt_name').find('td').text(element.title);
    $('#prompt_datatyp').find('td').text(element.dataType);     
    $('#prompt_groupCode').find('td').text(element.groupCode);
});

提示符元素定义如下:

    <table id="the_prompt" style="border:2px solid grey;">
      <tr id='prompt_name'><td class="rate_prompt"></td></tr>
      <tr id='prompt_datatyp'><td class="rate_prompt"></td></tr>
      <tr id='prompt_groupCode'><td class="rate_prompt"></td></tr>
     </table>

但我希望会有一个插件从这个或什么的。特别是，我希望我能避免定义一个静态的html元素，其预定义的位置，大小等，并手动更新其内容。相反，我希望看到一个提示，类似于悬停帮助，就在被单击的列表元素旁边，箭头指向被单击的元素。我对jQuery还是个新手，但它的功能和插件给我留下了深刻的印象，所以上面的想法对我来说并不是不现实的。

这个解决方案显示了从固定div中的data属性获取的描述，并且当鼠标悬停在列表项上时还调整了信息框的位置:

jQuery代码:

$(document).ready(function(){
    var lastli = null;
    var ci = $('#carinfo');
    $('.carlist li').hover(function(e){
        if (lastli == this) { return; } else {}
        var top = e.pageY;
        var left = e.pageX;
        if (left+100 > $(window).width()){
            left -= 100;
        }
        ci.html($(this).data('info'));
        ci.css({'top':top, 'left': left}).show();
    },function(e){
        var elt = e.toElement || e.relatedTarget;
        if (elt != this && elt != ci[0]) {
            ci.hide();
            lastli = null;
        } else {
            lastli = this;
        }
    });
    ci.mouseleave(function(e){
        var elt = e.toElement || e.relatedTarget;
        if (elt!=lastli) {
            ci.hide();
            lastli = null;
        }
    });
});
HTML示例:

<ul class="carlist">
    <li data-info="2004 Ford Ranger XLT 2.3L 2WD 125758 miles $5,988">
        2004 Ford Ranger
    </li>
</ul>
<div id="carinfo"></div>
CSS: 

ul.carlist { 
    list-style:none;
    padding:0;
}
ul.carlist li {
    padding: 5px;
    margin: 5px;
    background-color:#eef;
}
#carinfo {
    position:absolute;
    display:none;
    background-color: white;
    border:1px solid red;
}
演示

jquery可以在弹出窗口或现有HTML页面上处理HTML标签的更新，如下所示:

       <div class="highlight"><label>Car Info:</label>
                <label id="carinfo" for="carinfo"></label>
        </div>

<script type="text/javascript">
    $(function () {
        $('#yourlist_id').change(function () {
            var selectedCar = $(this).val();
            //I don't know how you want to get the car info 
            //if you have a function that returns that data it would be
            //something like this:
            var carInfo = getCarInfo(selectedCar);
           $("label[for='carinfo']").text(carInfo); });
      });

希望有帮助!

相关文章：