Bootstrap彈出窗口顯示相同的內容

Question

有沒有人使用bootstrap彈出窗口？我在實施它時遇到了一點困難。

我正在動態創建電影縮略圖，並且在mouseenter事件中，我使用彈出窗口來顯示圖像的詳細信息。問題是，所有圖像都顯示相同的細節。

下面是我的一些代碼部分：

<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的，我不能確切位置。