根据当前图像更改弹出框内容

Question

您好，我想根据当前显示的图像更改我的弹出框内容，但它只显示提供的第一张图像（a.jpg）。我希望弹出的 img 根据当前的 img src 进行更改。

HTML：

<img id="popover" rel="popover" title="" data-content="" 
 data-trigger="hover" class="img-circle" 
 onmouseout="displaypreviousimage(this)" 
 onmouseover="displaynextimage(this)" 
 src="https://pbs.twimg.com/media/DOSczbmX4AAiFEd.jpg" 
 width="300px"/>

Javascript：

var images = [
        "https://img00.deviantart.net/e568/i/2013/177/b/2/hatsune_miku___last_night_good_night_by_vocalmaker-d6as4aq.png", 
        "https://i.scdn.co/image/e331fd3822f9691fbd707fb3e393bafd5fcf4b8a",
        "https://germankpopinfo.files.wordpress.com/2016/10/bts-wings-album-cover.jpg"
    ];

var counter = 0;

function displaynextimage(x){
    var imghtml = "";
    if( counter < images.length)
    {
        x.src = images[counter];
        counter++;
    }
    else
    {
        counter = 0;
        x.src = images[counter];
    }
    if(x.src == images[0])
    {
        imghtml = '<img src="a.jpg" width="150px">';
        $('#popover').popover({placement: 'right', content: imghtml, html: true});
    }
    if (x.src == images[1])
    {
        imghtml = '<img src ="b.jpg" width = "150px">'
        $('#popover').popover({placement: 'right', content: imghtml, html: true});
    }
}

function displaypreviousimage(x){
    x.src = "https://pbs.twimg.com/media/DOSczbmX4AAiFEd.jpg";
}

Answer 1

$('#popover').popover('destroy');
$('#popover').popover({placement: 'right', content: imghtml, html: true});
$('#popover').popover('show');

我所要做的就是销毁之前的弹出框 :')