Question

所以我需要做的是：当我从列表框中选择一个项目时，我需要能够在一个单独的框中动态显示该项目的其他信息。即假设我正在浏览汽车列表，对于我选择的每辆车，我会显示价格，颜色，里程等。这个想法是为了在外观和感觉上类似于旁边弹出的提示当使用悬停时的元素。换句话说，理想情况下，我会看到一个小盒子，它在项目旁边神奇地弹出所有必需的信息。关于如何实施的任何建议？

更新：澄清我在寻找什么。我最终通过响应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);
});

prompt元素定义如下：

    <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的新手，但我对它的功能和插件印象非常深刻，所以上面的想法对我来说似乎并不现实。

Answer 1

此解决方案显示了固定div中数据属性的描述，并在将鼠标悬停在列表项上时调整信息框的位置：

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

DEMO

Answer 2

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

      });

希望有所帮助！

html，javascript：滚动列表框项目 - 并显示每个项目的提示

2 个答案: