-3

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

更新：澄清我在找什么。我最终通过响应 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 还比较陌生，但它的功能和插件给我留下了深刻的印象，所以上面的想法对我来说似乎并不不切实际。

4

2 回答 2

2

此解决方案显示了从固定 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;
}

演示

于 2013-05-14T18:51:42.353 回答
1

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

      });

希望有帮助！

于 2013-05-14T16:42:55.043 回答