Question

当imagepicker的一个选项悬停时，我需要使用引导弹出窗口，但这不起作用

我的代码是：

     $("select").eq(0).imagepicker({ show_label: true, hide_select: true });
                $(".thumbnail").each(function () { $(this).attr("rel", "popover"); });
                $(".thumbnail").hover(function () {
                    var index = $(this).parent().index();
                    var content = $(".image-picker").children().eq(index).attr("data-content");
                    $(this).popover({
                        trigger: 'focus',
                        animation: true,
                        title: $(this).find("p").text().trim(),
                        placement: 'bottom',
                        content: content
                    });
                },
                function () {
                    $(this).popover('destroy');
                });
            });

        </script>


        <select multiple="multiple" class="image-picker show-labels">
            @foreach (Entidades.Resource resource in (List<Entidades.Resource>)ViewData["lsResource"])
            {
                <option  data-img-src="@(!string.IsNullOrEmpty(resource.RES_VIMAGE) ? resource.RES_VIMAGE : "#")" value="@(resource.RES_ID)" data-content="@resource.RTR.RTR_TDESCRIPTION">
                    @resource.RTR.RTR_VNAME
                </option>
            }
        </select>

和我挂载的HTML：

  <select multiple="multiple" class="image-picker show-labels" style="display: none;">

                <option data-img-src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg" value="1" data-content="huehueBRBRBRBRBRBRBRBRSFD sfdhufdsusd">
                    Agenda digital
                </option>
                <option data-img-src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg" value="2" data-content="hhdsbdshbdskjbdaskjhsjak adsb habd hasbd hasbd asbd hbsahd bsahdb sabd abd asb dasbdas ">
                    resource dois
                </option>
                <option data-img-src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg" value="3" data-content="duash udfas h has bdash bdhsab hdas hdasb hdasbhj dbahjabd sh">
                    terceiro
                </option>
                <option data-img-src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg" value="4" data-content="uhdsuih">
                    uhsadudhasuidas
                </option>
                <option data-img-src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg" value="5" data-content="gdyusagygasu">
                    ydasgyugdayugdasy
                </option>

        </select><ul class="thumbnails image_picker_selector"><li><div class="thumbnail selected" rel="popover" data-original-title="" title=""><img class="image_picker_image" src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg"><p>
                    Agenda digital
                </p></div></li><li><div class="thumbnail selected" rel="popover" data-original-title="" title=""><img class="image_picker_image" src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg"><p>
                    resource dois
                </p></div></li><li><div class="thumbnail selected" rel="popover" data-original-title="" title=""><img class="image_picker_image" src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg"><p>
                    terceiro
                </p></div></li><li><div class="thumbnail selected" rel="popover" data-original-title="" title=""><img class="image_picker_image" src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg"><p>
                    uhsadudhasuidas
                </p></div></li><li><div class="thumbnail selected" rel="popover" data-original-title="" title=""><img class="image_picker_image" src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg"><p>
                    ydasgyugdayugdasy
                </p></div></li></ul>

我希望在缩略图悬停时显示popover，popover包含此缩略图的标题及其描述。

Answer 1

我使用此代码来解决此问题

$(".thumbnail").each(function () {
                    $(this).attr("rel", "popover");
                    var index = $(this).parent().index();
                    var content = $(".image-picker").children().eq(index).attr("data-content");
                    $(this).popover({
                        trigger: 'focus',
                        animation: true,
                        title: $(this).find("p").text().trim(),
                        placement: 'bottom',
                        content: content
                    });
                    $(this).bind({
                        mouseenter: function () {
                            $(this).popover('show');
                        },
                        mouseleave: function () {
                            $(this).popover('hide');
                        }
                    });
                });

当组件在页面中充满电时，我在每个项目中使用bind to mouseenter和mouseleave。悬停成功地工作了。

Bootstrap popover不使用imagepicker.js

1 个答案: