Question

有没有人使用过bootstrap popover？我在实施它时面临一点困难。

我正在动态创建电影缩略图，而在mouseenter事件中，我使用popover来显示图像的细节。问题是，所有图像都显示相同的细节。

以下是我的代码的一部分：

 <script>
    $(function () {
        $(".get-movies").click(getEventHandler);
    });

    function getEventHandler() {
        var name = $(".get-movie-name").val();

        $.ajax({
            url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=my_key&q=" + name + "&page_limit=5",
            dataType: "jsonp",
            success: function (response) {
                $(".display-movie").empty();
                var ul = $(".display-movie");
                for (var i = 0; i < response.movies.length; i++) {
                    var img = $("<img>").attr("src", response.movies[i].posters.original)
                                        .attr("id", i)
                                        .attr("data-placement", "right")
                                        .attr("class", "img-popover")
                                        .on("mouseover", response, getPopOver)
                                        .on("mouseout", hidePopOver)
                                     .css({
                                         width: 200,
                                         height: 200,
                                         margin: 20
                                     });

                    var div = $("<div>")
                        .append(img)
                    $("<li>")
                        .append(div)
                        .appendTo(ul);
                }
            }
        });
    }

    function getPopOver(info) {
        console.log(info);
        var image = '<img src = " ' +info.data.movies[info.target.id].posters.thumbnail+ ' " />';
        $(".img-popover").popover({
            title: info.data.movies[info.target.id].title,
            content: image,
            trigger: "hover",
            html: true
        })
    }


    function hidePopOver() {
        console.log("Leaving here");
        $(".img-popover").popover("hide");
    }
</script>

Answer 1

我想你的：

var name = $(".get-movie-name").val();

将返回与该类匹配的项集合中的第一项。

你可以试试：

var name = $('#' +this.id + ".get-movie-name").val();

但是没有看到一些html，我在这里不太准确。

Bootstrap Popover显示相同的内容

1 个答案: